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Flash 5, Fireworks 4, Dreamweaver 
4, UltraDev 4, LiveMotion 


A Flash Player for Pocket PC, 
Macromedia Generator, Contest for 
Flash developers 


We take a look at some creative 
options for enhancing your 
Websites with music 
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reveals his philosophy behind 
motion graphics 
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Missing an issue? Our back issues 
sell out quickly, so make sure you 
order it now! 


Add atmosphere to your animation 
by creating the illusion of 3D 


Prompt Flash into updating your 
menus without having to make any 
manual alterations 


Company founder Brad Johnson 
discusses the roles of Flashin 
creating leading edge presentations 
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Create stunning 3D Flash 
interfaces using Vecta 3D 


Take out a subscription to the 
Specials and get every issue for 
half price! 


Whether you're a beginner or an 
aficionado, these expert tips will 
give you total control 


Create an interactive showcase 
using Shockwave to promote your 
band through the Internet 
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We bring you the features and tips 
in Flash that help to streamline 
your workflow 


Control and modify Flash SWF 
movies from standard HTML with 
Dreamweaver or UltraDev 


Two chances to win Flash 5 and 
Generator Developer Edition 


A profile and tutorial on animating 
a vector bitmap from the creators 
of the Bob the Builder Website 
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Find out what just What the 
Macromedia Exchange has to offer 
_ the Flash community 


Razorfish show how you can make 
your own Extensions and share 
them with the Flash community 
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Get the best of both worlds and 
ave £37 in this great Arts and 


We show you where to find the best 
___ of everything Flash on the Web 
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Add actions, pictures and sound 
in SWiSH and incorporate the 
movie into Flash 


Mix vector and bitmap 3D images 
into your SWF animation and make 
your site more compelling 


We review the best Flash books on 
the market 
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FREE 15 POP3 email accounts 

FREE email forwarding 
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What makes SoundShopper.com the most 
popular soundsource for New Media Designers ? 
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Design and deliver distinctive, 
low~bandwidth Websites with 
Macromedia Flash 5, the 
professional standard for producing 
high-impact Web experiences. 


With its intuitive user interface, 
Dreamweaver 4 has everything 
you need to develop a professional 
Website with ease. You can also 
build Flash graphics directly 

in Dreamweaver. 


All the powerful new features of 
Dreamweaver 4, plus extensive 
features for developing databases 
on your desktop. 


Create, edit, and animate your 
Web graphics using a professional 
set of bitmap and vector tools. 
You can export your images 

into Dreamweaver and other 
HTML editors. 


Streamlines the authoring process 
with centralised, automated 
functions that make it easier to 
manage assets and create content 
for low-bandwidth delivery. 


Get creative with LiveMotion — 
great for producing Web graphics 
or entire pages with interactivity, 
animation, and sound. 


This demo of the Java Integration 
Kitenables Dreamweaver or 
UltraDev to control and modify 
Flash SWF movies from standard 
HTML, and gives rise to many 
different possibilities. 
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Flash Player for Pocket PC 


Macromedia's link with Casio is another boon for the Mobile Internet industry 


acromedia’s Flash Playermay be 
the most distributed piece of 
software in the history of the 
Web, but so far it’s largely been 
onriceed to desktop PCs and Macs. 

The company estimates that 96 per cent of 
these users are able to view content created 
with Flash. For this reason, Macromedia 
knows it has to move beyond these 
environments. And one of its first ports of call 
is the Pocket PC — handheld devices running 
a special version of Microsoft Windows. 

The Pocket PC offers built-in audio, 16-bit 
colour depth and processors running at up to 
206Mkz. As such, it provides an ideal 
environment for displaying Flash content. The 
range currently includes the Compaq iPaq, 
the HP Jornada and the Casio Cassiopeia. 

The Pocket PC vendors are pleased about 
the Flash Player being available for their 
platform. Yozo Suzuki, managing director of 
Casio Computer Co Ltd, said: “Casio is 
excited about Macromedia Flash Player for 
Pocket PC. Macromedia Flash makes 
multimedia content more readily 
accessible and is an essential new 
technology for the dawning Mobile 
Internet age. Its implementation on 
the Pocket PC platform promises 
to benefit both consumers and 
engineers alike, and should 
lead to further expansion of 
the Mobile Internet. Casio is 
pleased to be working 
with Macromedia.” 

With wireless Internet 
connections likely to 
boom over the next 
few years, 
Macromedia 
realises the importance 
of having its client available 
on these new platforms. According 
to Kevin Lynch, president of Macromedia 
products: “Devices are emerging as a major 
force in the next generation of the Web, and 
Macromedia Flash is crucial for delivering a 
great user experience on everything from 
Pocket PC devices to Internet appliances. 
Support for the Pocket PC platform ensures 
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the continued ubiquity of the Macromedia 
Flash standard and brings new opportunities 
for developers to expand their business into 
this new platform.” 

The full release of Flash Player for the 
Pocket PC won't be available until later in the 
year. However, two advanced downloads are 
available. Flash developers interested in 
working with the Pocket PC can download the 
free Macromedia Flash Authoring Kit for 
Pocket PC from [w] www.macromedia.com/ 
software/flashplayer/pocketpc/ authoring. 
This provides Flash 5 authoring guidelines, 
documentation plus Pocket PC examples. 

And at [w] www.macromedia.com/ 
software/flashplayer/pocketpc/ download, 
it’s possible to download the developer 
release of the Flash Player for each of the 
three main Pocket PC devices. This will 
enable Pocket PC content to be tuned in 
advance of the full release being available. 

In addition, Macromedia has provided an 
online gallery at [w] www.macromedia.com/ 
software/flashplayer/pocketpc/ gallery. This 
provides example applications, games, and 
entertainment downloads from the likes of 
Sony Pictures Entertainment, Wildhand!, 
FunMail and shockwave.com. 
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According to Phil Holden, Microsoft's 
director of marketing: “Microsoft and 
Macromedia are committed to the thriving 
device market and making sure that 
dominant Web technologies such as 
Macromedia Flash play a key role in this new 
space. There's a great synergy in bringing the 
Macromedia Flash Player to the Pocket PC 
platform, as the hundreds of thousands of 
Macromedia Flash developers will know they 
have an extensive audience, and Pocket PC 
users will be able to experience some of the 
best Macromedia Flash content online.” 

Meanwhile, this isn't the first time it’s been 
possible to use Flash content outside of a 
mainstream environment. 

Some other Internet-enabled devices are 
already taking part — including Microsoft 
WebTV, MSN Web Companion, AOL TV, 
3Com Audrey and the Sony eVilla. Flash 
content has caught the imagination of 
Internet users. And the standard would 
seem to have a bright future ahead of it — 
ona wide range of platforms. EJ 


=) Goto sa pees egeenr ait ose 
emiatily to download the developer release 
Player for the three main Pocket PC devices. 
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Macromedia's online gallery provices downloads from the likes of Sony Entertainment and shockwave.com 


Macromedia Generator Delivers 


Users benefit from dynamic front ends and lower production costs 


acromedia Generator is proving a hit for 
Websites requiring real-time visual 
content. It allows sites to be quickly 
populated with interactive graphics, charts, tables and 
animations through drag-and-drop objects within 
Macromedia's Flash 5. 
According to Gayle Pietras, senior marketing 
manager at Macromedia: “The number one benefit 
that customers experience with Generator is a 


decrease in maintenance and production costs. 


macromedia 
GENERATOR2 
Developer Edition cs 
i Automat 
ae Solution (or nalized 
Web Site Graphics _ 


Contest for Flash Developers 


acromedia has announced a ‘Design for 

Usability’ contest. This is part of a 

company-wide initiative to emphasise 
the importance of effective, usable Websites. The 
winners will be showcased in two US magazines, as 
well as on Macromedia’s Website. 

“There's a tremendous amount of innovative design 
happening in the Macromedia Flash community,” said 
Kevin Lynch, president of Macromedia products. “It’s 
important that we work together to deliver even more 
effective user experiences.” 

Novice and advanced users will compete by 


building a site using Macromedia Flash 5. Winners 


Flash Wars 


tar Wars Starfighter, the new PlayStation 

2 game from LucasArts Entertainment 

Company LLC, used Macromedia Flash 
Player technology to provide the user interface. 

“The Macromedia Flash community has long been 
rebelling against the dark side of boring, static user 
experiences,” said Kevin Lynch, president of 
Macromedia products. “The great experience in Star 
Wars Starfighter shows the incredible flexibility in 
delivering Macromedia Flash content across a wide 


variety of devices.” 


Image © Lucasfilm Ltd. & TM. All rights reserved. Used under authorisation. 


OV World 


The Creative Digital Video Magazine 


CAPTURING © €DITING * COMPOSITING ® SPECIAL EFFECTS © WEBaSTREAMING 


Generator separates design from content, which 
means that content is automatically updated without 
any manual resources.” 

Adventure Zone Network (www.azn.com), a digital 
travel entertainment company, uses a combination of 
Macromedia Flash, Dreamweaver, Fireworks and 
Generator, combined with Allaire ColdFusion and 
Spectra. |t says that Generator helps it to drive traffic 
and create brand awareness, meaning it can 
differentiate itself from other travel sites. 

And the company says it’s been able to reduce 
production and content management because 
Generator enables its Web team to remotely manage 
thousands of media assets through its Web interface. 

Reno Marioni, chief executive of Adventure Zone 
Network, said: “Many sites using content management 
solutions end up looking the same, sacrificing visual 
appeal for back-end control. With Generator, we get 
the best of both worlds: the ability to publish fresh, 
dynamic content, coupled with scalable, low-cost 
production and content management capabilities.” 


Download the free Generator authoring extensions at 
[wW] www.macromedia.com/software/generator/trial/ 


will be judged on their site’s unique use of Flash, as 
well as its creativity and usability. Judging will be by 
means of Macromedia’s ‘Top 10 Usability Tips for 
Flash Web Sites’, which can be accessed at 
[w] www.macromedia.com/go/usability. 

The contest runs until the end of March, and one of 


the judges is Chris MacGregor, editor of 


Flazoom.com. He said: “By focusing Web developers 
on creating a site centred on the user experience, the 


contest will reinforce that pushing creative 


i Making a film: part 1 The pre-production stage 


boundaries does not have to be at odds with usability.” 


Access Macromedia's judging criteria for competition 
entries at [w] www.macromedia.com/go/usability 


i Spiral Films writer/director/producer, Ben Frain, tells all 


@ Manic Street Preachers Captured by the BBC in Cuba 


@ ikegami HL-DV7W Full review of this high-end camera 


LucasArts’ Producer Reeve 
Thompson says: “By using 
Macromedia Flash, we were 


able separate the 


Your monthly dose of inspiratio 
Issue seven on sale 27th March 


development of Star Wars 
Starfighter’ interface from 
the development of the 
game itself. This let our 
core teannfoclsen w Special subscriptions offer — 13 issues for the price of 8 
delivering the best 


gameplay possible.” 


To see the bigger picture visit www.dvworld.co.uk 
for all the latest news, reviews, tutorials and advice. 
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Sound and vision 


We take a look at some creative options for musically 
enhancing your Websites 


ot so long ago, if you’d have 
suggested to a Web designer 
that it might be a good idea to 
use music on a site, he’d have 
given you a suspicious look as if to say, 
‘have you ever actually used the 
Internet before?’. 

The download times for Websites 
without music were worrying enough. 
But more and more Web designers are 
starting to realise that music and sound 
are powerful and underused tools in 
making Websites stand out. Download 
times aren't always greatly increased 
and they can endow sites with an 
identity and brand association that is 
sorely needed in the world’s most 
crowded marketplace. If a picture is 
worth a thousand words, a soundtrack 


can be worth a thousand animated GIFs. 


Why use music or sound on 
your site? 

Some designers are still vehemently 
opposed to online music, such is 

their concern about download times. In 
some ways, this is surprising 
considering how pivotal music is to TV 
and radio advertising. 

Other designers already have sites 
with 60 second loading times or more 
and have overlooked the branding value 
and attention that a dedicated 
soundtrack can bring. 

Many sites that do incorporate music 
employ badly-thought-out or tinny 
music, which can destroy an otherwise 
professionally-designed site. There are 
many reasons to use music on the Web 
and any negatives can almost always be 
outweighed by the thoughtful 


conception, creation and compression 
of music and sound. 


On-line advertising 


‘Itis my belief that as we move forward, 
music will provide the key to enabling 
more effective marketing and 
communication messages to be 
transmitted across the Internet’: so said 
Robert Woodford at Macromedia. 
Imagine TV or cinema advertising 
without music and it’s easy to see the 
shortcomings of most existing online 
advertising. Compare TV and online 
advertising: Websites currently have 
the advantage of interactivity whereas 
TV wins on visual and aural 
sophistication, but this will change. As 
cable and ADSL Internet access > 
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1. Import your sound, select a keyframe, and 
select the sound in the palette. 


Full stream ahead 


become widely used, Web design will 
increase in sophistication and offer 
even greater branding and 
entertainment opportunities than TV. 

It can be argued that this is already 
starting to happen. With the prevalence 
of Flash on the Web, it is clear that 
people are starting to expect more 
stimulating content and as time goes 
on, more and more sites will be vying 
for users’ attention. 

But the use of music ina site is about 
more than just impact. Research in 
marketing has shown how significant a 
role music plays in the purchasing 
decisions of consumers: an 
atmospheric backing track can have an 
effect, as can carefully targeting music 
toa particular audience. In one study by 
a leading off-license chain, it was 
reported that French wine outsold 
Italian by 100 per cent whenever French 
music was played in the store. 

In addition to affecting purchasing 
decisions, the use of good music is an 
essential tool used by advertisers to 


create strong brand recognition and 
loyalty to their image, products and 
services: a technique sometimes known 
as Audio Branding. 

There are many other reasons for 
wanting to use music on your Website, 
ranging from pure creative expression 
to straightforward communication, but 
for the purposes of this article, we shall 
assume that you are doing it to sell 
someone something. 


Is audio the enemy of 
download? 


While the average Web viewer 
becomes impatient after 10 to 15 
seconds of waiting for a site to 
download, many designers who build 
large Flash presentations have 
overcome this by creating an interesting 
loading sequence or some other form 
of pastime. 

Furthermore, a distinction can be 
made between consumer-orientated 
Websites and those orientated towards 


professional users. Sites that are 
professionally orientated often need 

to be more sophisticated in their 

design because professional users 
generally possess faster Internet access 
— they're also likely to be more 
demanding customers. 

Nevertheless, it is a mistake to 
imagine that music can only be 
incorporated on professional sites. Even 
the smallest use of sound, which only 
increases downloads by a minute 
amount, can make an impact. For 
example, as with symbols in Flash, one 
sample can be used an infinite number 
of times but only needs to be 
downloaded once. As a result, a few 
sound effects can create the illusion of 
a full soundtrack while keeping the file 
size low. And then there’s streaming. 
With the right piece of music, the 
pre-load time can be as little as two 
seconds. In which case, the question 
shouldn't be whether or not to use 
sound but how much to use it, balanced 
against file size considerations. 


From a simple ditty to a full blown soundtrack, the following whys and hows should help you decide on a format... 


1, Integrated sound effects 

This is the most basic example of adding 
sound to Flash. It usually takes the form of 
linking short sounds to a keyframe or a mouse 
event, for example to acknowledge a mouse 
click or arrival at a particular page in your site. 
There are endless possibilities, and the 
process (s dealt with more than adequately in 
the excellent Flash tutorials. 


2. Opening of site 

If the intention is to create an engaging and 
lasting first impression, then a powerful 
musical intro can provide this. If it’s really 
good, it need only last a few seconds allowing 
for a very speedy download. 


3. Ident 

Whether or not the site you are designing is 
part ofa larger marketing campaign, you may 
like to announce your home page with a ‘sting’, 
which you can commission specially or adapt 
from any music already used in a wider 
campaign (we'll discuss the licensing 
implications later). This is best done in Flash 


as a sync sound and, assuming you are doing 


just a one or two bar intro, the process is 
simple: import the sound file, set the 
keyframe where you want it to start and select 
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it in the Keyframe Properties (see box-out for 
a step-by-step guide). It will automatically 
play with the rest of your scene. 


4. Loop 

Looping sounds to create a constant backing 
track is a similar process to using sync 
sounds, except here you select the Loop 
option, and it will automatically play the same 
file over until you instruct it to stop, or move to 
a different scene or page. It is possible to 
exercise great control over the exact start and 
stop times within this box or palette. 
Obviously this is a very efficient way of 
creating a small file because it only 
downloads the section once. Of course it is 
important to specify a loop that actually 
works musically as a loop, or the results will 
be irritatingly repetitive, which is worse than 
no music at all. For this reason, an 
experienced composer may be a better 
option than your mate Dave and his brand 
new sampler. 


5. Evolving music for site 

To create a greater sense of evolution in your 
loops you can have another sound (a piano 
melody or bass line for example) looping at a 
different rate, or strategically placed on the 


timeline. Similarly, you can evolve the track 
from page to page, from one scene to another, 
or ona specified mouse event, creating a 
much richer experience for the user and 
enhancing the sense of interactivity and site 
quality. Since different computers play Flash 
movies at different frame rates you need to 
have a streaming layer in order to force the 
user's computer to keep perfect time. This can 
be silent, but it's useful to have a click track to 
provide a visual reference for timing. You can 
loop multiple layers as well as adding sounds 
individually, but make sure that loops of 
different lengths all have a common multiple, 
or you will obviously lose sync. As with all 
aspects of Web design, don't assume that just 
because it sounds good on your computer it 
will on others, check. 


6. Full soundtrack 

A full soundtrack playing out in its entirety 
while the user browses the site can do 
wonders for the ambience, and can 
accommodate more complex music than even 
evolving loops. Obviously great thought 
should be given to the music you choose — 
think wine bar ambience, not synchronised 
advertising music — and do consider any 
licensing requirements. Full soundtracks are 


usually accomplished by streaming (and can 
be done on HTML sites), which avoids a 
lengthy download. 


7. Voice-overs 

Another option that can add magnificently to a 
site is the use of a voiceover. As with anything 
else, if it’s just tacked on for gimmick’s sake it 
can be irritating, but if written into the 
concept and design of the site, it can be more 
effective than almost anything else. Most 
likely you'll want a voiceover to accompany a 
presentation of some sort, and to sync up with 
that presentation, either in linear fashion, or 
in connection with mouse events. If this is the 
case, you should bring it in as a sequence of 
sync sounds, and treat it as you would any 
other sync sound. However you might want a 
full voiceover to accompany a full soundtrack, 
in which case it's worth putting them together 
in advance. It is worth noting though, that your 
music could stand up to greater compression 
than the voiceover, in which case you could 
compress them separately by placing them on 
different layers on the timeline and editing 
their individual export setting by double- 
clicking them in the Library window. If you are 
undertaking the encoding yourself, try a few 
alternatives and see which works best. 


Variations on a theme 


Technological and 

musical options 

So what considerations do you take into 
account when adding music to a site? 
The first has to be to decide who your 
market is — and this is key on every 
level. Do they have a broadband, or a 
28KB connection? Do they fall into a 
narrow marketing category, in which 
case, is there a style of music that 
would suit the site best? Are they 
people for whom a full soundtrack 
would be inappropriate? We could 
probably all do without a soundtrack 
when we're trying to negotiate round 
Internet banking. But even then a 
‘welcome’ melody wouldn't hurt, as long 
as it occurred just once. 

Musically, creative possibilities 
include ‘idents’ (the name for a short 
musical piece associated with a logo — 
Intel’s ‘dum, di doo di doo’, for 
example), or you might want a simple 
loop to keep visitors occupied while 
they wait for your site to download. For 
other sites, a discreet background beat 
or rumbles (www.crashtv.mcmail.com/ 
ctvflash.htm) might be appropriate and 
can help make your sites stickier. 

Maybe you feel that only a full-on 
techno soundtrack will do the job, or 
perhaps something a little more refined 
would be more to your taste. It is likely 
that if you already know you want music 
in your site then you already have a few 
ideas in mind. With a little flexibility, it’s 
usually possible to find the right 
balance between getting your ideal 
musical content and meeting your 
‘download budget’. Whatever you 
decide, the chances are that for best 
integration results you'll want to put 
your music into Flash and sync it in 
some way to your visual content. 

Why Flash? Because it’s flexible and 
everyone has a Flash Playerthese days 
(or if they haven't, they should — it’s 
only a three minute download). Flash is 
the best option for multi-layering 
sounds (more on that later) and enables 


2. After selecting a sound, scroll forward to a 
random frame and choose Insert>Frame. 


you to impress visitors with an array of 
interactivity options, bells and whistles. 

The next important question is 
whether your music should be 
downloaded initially to the user’s 
computer, or streamed gradually as 
they listen. This depends on the nature 
of your site: the expected download 
tolerance of your customers or visitors, 
and the length and style of music 
employed. Streaming can be done in 
Flash, Windows Media Player, 
RealPlayer or QuickTime. Since Flash 
can do it, you are best off using Flash — 
its huge user base obviously negates 
the need for users to download other 
plug-ins. QuickTime is notoriously 
scarce on Wintel machines, and WMP 
is notoriously unsteady on Macs. 

It is worth noting here that if you 
don't need any control about how your 
music integrates with the visuals, you 
can plump for one of the other 
streaming options. Again, look at your 
perceived client base — if the site exists 
exclusively to sell software that is only 
available on the Mac, then you can be 
sure that all of your intended customers 
can run QuickTime, in which case, you 
can confidently embed a self-starting 
QuickTime stream into a page, 
bypassing the need for Flash content. 

Another important consideration 
while we're talking about streaming is 
your server speed. How many users will 
be on your site at the same time? If you 
are going to have 100 simultaneous 
streams, you had better have the server 
power to accommodate this. Talk to 
your host. 

The next vital step in incorporating 
music within a site is the judicious use 
of compression. This is a necessary step 
given the large size of uncompressed 
audio and if done well, can vastly cut 
the file size without compromising the 
quality. There are many different 
aspects to compression, and each of the 
above streaming solutions achieves it in 
a slightly different way, but they all 


3. If the sound needs cropping, click Edit 
(Sound palette) and crop using the centre bar. 


Export Options in Flash 5 


While there are excellent specialised codecs available in QuickTime Pro or Media 
Cleaner Pro — and if streaming is your thing, then they offer greater quality compression 
than Flash — Flash offers all of the sync-ing potential that Web designers incorporating 
music usually need 

ff you haven't already done so, import your sound and open the Library to see it listed 
with your other symbols. {f you are using sound from the shared Library. first drag it to the 
keyframe you want it to play from 

Double-click the sound's waveform in the Library window (or select Properties from the 
Library's Options menu) and a new window will appear listing your Compression Options, 
under the heading Export Settings. 

You will see four options — Default, ADPCM, MP3, and Raw. 
- Default setting uses the settings in the Publish Settings window (where you can also 
choose to override individual sounds’ export settings) 
- If your piece is short, then you can probably get very good results from the ADPCM 
codec, which Flash r mends for exporting sync sounds such as button clicks. 
- Raw uses the sound in its existing format, although you do have the option of converting 
stereo to mono and re-sampling at a lower rate (Flash cannot increase the sample rate of 
a sound once it is imported — and if you change the sound settings in another program, 
click Update in the Sound Properties window). 
MP3. If you are doing something with music or long voice sections you should opt for the 
MP3 export option. MP3 uses different methods for compression, which asks you to set 
not the Sample Rate, but the bit rate at which the data file is transferred (between 8 and 


160Kbps). Good results can be achieved in music with rates as low as 16Kbps. 


operate on the same general principles 
[see ‘The basics of compression]. One 
simple example is that it is not always 
necessary to have a piece of music or 
sound effect in stereo, a fact which can 
enable you to reduce your file size by 
half. However stereo is generally 
preferable when listening to dance 
music which uses repetitive beats. 


Choosing the most effective 
music for your site 


There are essentially two ways of 
getting the right music for your site: > 


4. In this example, we want to repeat (loop) only the first four bars of music. 
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5. Use the Play button in the Edit Envelope 
window to test the loop. 


8. If necessary, after cropping, move the start point. 
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6. To loop the next four bars add a new layer, 
add keyframes to the start and to frame 1. 


do-it-yourself or use the professionals. 
The problem with the first option is that 
creating effective and audience- 
targeted audio-branding is no small 
feat. Unless you (or your mate Dave) 
happen to be able to create the precise 
style of music your site requires, you 
will find that your music just doesn't 
quite work with your visuals. 

Again, compare Web music with 
screen music — if you were making a TV 
commercial would you do the music 
yourself? If the answer is yes, then you 
can probably skip the next few 
paragraphs. If the answer is no then you 
should opt for outside help. 

A music production company that 
knows their stuff will establish the aims 
of the site and ascertain the most 
appropriate kind of sound and style of 
music. A ‘Web aware’ production 
company can do this and advise you 
on the most effective method of 
encoding, or indeed undertake the 
encoding for you. 


Library music 

The least expensive option available for 
licensing professional quality music is 
to go to a music library. The principle 
behind music libraries is very simple: 
music production companies create 


7. Use the crop bars (Edit in the Sound palette) 
again for bars five to eight. 


compilations, usually based on a theme 
or style (such as ‘nature programme’ or 
‘Folk music’), that they then license 
annually on a non-exclusive basis 
(meaning they can license the same 
piece to other people at the same time). 
Generally, music libraries have a 
reputation for offering fairly naff music 
and sound effects. Although this is 
undoubtedly true in many cases, it is 
also false in many others. 

You should be aware that while 
you are getting professional music 
at a fraction of the cost it would have 
taken to commission, the tune may also 
be used by numerous other people or 
companies so it isn't ideally suited 
for creating unique or integrated 
audio-branding. 

What it can do is provide an exciting 
or relaxing mood and ensure a more 
enjoyable experience for the user. An 


annual license for the Web for up to one 
minute of music is £180. 


Commercial music 


The use of a well-known song or piece 
of music has a long established 
precedent in other forms of advertising. 
Some of the world’s most widely 
recognised music can be associated 
with a brand. There are two main 
barriers to using existing work, the first 
being that a piece can often seem 
contrived (especially true of many 
classical pieces). 

The other important barrier is the 
cost of licensing commercially 
successful music. In short, the sky's the 
limit in terms of what you can be quoted 
for using a well-known song or artist, 
especially if you want to negotiate any 
kind of exclusivity. Getting permission 
can also be an arduous process if you 
don't have contacts (the Mechanical 
Copyright Protection Society can help) 
so it may be a good idea to let a 
professional licensing organisation 
handle this on your behalf. And don't 
think that if you recreate the piece 
yourself you can get away without 
paying a license fee. You can't. 


Original music 


The best way in which music can be 
tailored to serve a brand is by 


The basics of compression 


Given the restriction in the quantity of data 
that can be squeezed down a pair of 


twisted copper wires, anyone wanting to 


transfer audio or video files in anything like 


real-time must resort to compression. 


Here we'll concentrate on audio. 


Two kinds of compression are available — 


losstess, in which there's no difference 
between the original and the final file. and 


lossy in which there's no perceivable 


difference (using techniques which remove 


inaudible data only) or in which the sound 
quality is compromised, but hopefully not 
too much. 

When any sound is digitized, the 
recording process finds out what 
frequencies are present at any given time, 


and at what volume. This is done by 


sampling the audio (literally measuring the 


volume) at thousands of instances every 


second. From this sample, a waveform can 
be built up, which fairly accurately 


represents the original sound wave. 


However in order to determine the shape 
of the wave form most accurately, the 
volume must be sampled twice as often as 
the highest frequency we want to record, so 
while we may only be able to hear up to 
around 20KHz. the best sample rate is 
around twice that, the industry standard 
being 44KHz 

The other variable is the detail in which 
the volume is recorded, or the bit-depth. 
While 8-bit sampling gives 64 possible 
volume levels at any given instant, 16-bit 
sampling gives 512 possible levels, and in 
compression it is not uncommon to go 
tower still. 

MP3 encoding also uses psycho- 
acoustic methods, whereby the bulk of the 
ble. Where 


compromises are made, they tend to be 


data that is removed is in: 


more towards the higher and lower parts of 
the human audio spectrum, sacrificing 
deep sounds near 20Hz and high-pitched 
sounds up at around 20KHz. 
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9. The next step is to modify the sound's Export Settings: to do this, open the Library and 
double-click on the object in the Library window or select Properties from the Options menu. 


commissioning a composer with a | 
specific brief. You may be searching for 
that elusive edge that no existing 
composition seems to bring. An 
experienced composer can work from 
any brief, and someone experienced in 
screen music can tailor a piece to an 
existing design or animation. 
Alternatively, you may have a piece 
of commercial music in mind that 
would be perfect for your site, but you 
don't have the budget to pay for a 
license. Again, an experienced 
composer can produce a piece 
stylistically and thematically very close 
to your first choice, often at a fraction of 
the cost. Clearly, specially 
commissioned music is the most 
successful way to establish a unique 
musical identity for your site. With 
effective planning, the music can evolve 
while simultaneously emphasising 
specific elements of yourmessagetoa | 
target audience. 


Practical examples 


Ona simple level, if your site is one of a 
number of browser windows open 
simultaneously (as will often be the 


10. Selecting Properties will open the 
Sound Properties window... 


case when, for example, researching a 
number of retailers to find the best deal 
for the same product) then good music | 
playing from your site (as long as it is | 
obviously coming from your site) will 
attract the user's attention. 

If your window is the most prominent, 
then the customer will see your offers 
first. They may even close other 
windows to enhance the download | 
speed if there are more pages to come. 

Another example: you could offer a 
choice of music in different styles. You 
can ensure that visitors to your site are 
greeted by their favourite style of music 
through the use of cookies. Result: your 
online brand can have multiple 
identities, if desired, and your | 
customers are both empowered and 
entertained, meaning they come back 
again and again. 

Furthermore their choice of musical 
style could be used for marketing 
purposes: if Britney Spears requests 
outnumber Beethoven requests by ten 
to one, you get a snapshot picture of the 
type of person that visits your site. 

A few other nice little tricks you 
could consider: if you were feeling keen 
you could include a mute button, or 


Compression Settings, among other things. 


Sites worth checking out 


www.amadeusmedia.com — cutting-edge 
company leading the way in providing 
original music, and licensing services for 
companies wishing to use sound or music 


on their Websites 


www.beatnik.com — alternative 


technology for encoding music 


www.balthasar.com — maintaina 
high-powered site famous for its sheer 
impressiveness in using visual and sound 
coherently. The music is pretty naff but 


well-integrated on the site 


www.meps.co.uk — Mechanical Copyright 


Protection Society 


cute little graphic equaliser animation 
— or both (as seen at www.neostream. 
com). Alternatively if you were feeling 
really keen you could code in such a 
way as to alter the volume level or 
tempo of a piece, although this could 
require multiple versions of your music 
if you’re using streaming. 

If edu-tainment is your thing, you 
could animate each note of a tune as it 
is played, or create a karaoke-style 
bouncing ball to follow the words of a 
song. There are countess possibilities, 
most far less cheesy than these. While 
the technology is a limiting factor to 
some extent, there are many ways to 
impress viewers with your site’s novelty, 
quality, and entertainment value. EEE 


Load Order: 


Options: [7] Generate size report 
CD omit Trace actions 
(Protect from import 
C1 Debugging Permitted 


www.elbow-room.co.uk — unisex pool 


room site promoting ‘the rebirth of pool’ 


www.rocketnetwork.com — ‘Rocket 
Network’ is the name of the company that 
develops ‘tools and services for on-line 


professional audio collaboration’ 


www.thelinkz.com — a plethora of 


‘shocked’ resources 


www.sseyo.com — 200 bytes of ‘open’ 


text to choose from, and the Koan plug-in 


www.soundshopper.com — Just that: a 
sound supermarket with such vibes as 


‘urban grooves’ on the shelves 


—— 


0 100 
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Audio Stream: MP3, 16 kbps, Mono 
Audio Event: MP3, 16 kbps, Mono 


CD Override sound settings 


Version: 


12. To override the Export Settings of individual sounds, use File>Publish Settings. There are four 
options: Default, ADPCM, MP3, and Raw - see the ‘Export Options’ boxout for more details. 
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Hillman Curtis 


Motion is the message for Hillman Curtis, a pioneering Flash designer and author whose 
company advocates: “A kind of wide-eyed awe for the creative world around us.” 


o say that Hillman Curtis is a Flash guru is 
true, but could also be misleading. It’s true 
that he’s written a respected book called 

i Flash Web Design, but it’s as much about the 
philosophy behind using motion graphics as it is about 
killer scripting. 

On the other hand, his work does reveal a more 
experimental, ostentatious side, but one which is 
ultimately subordinate to the restraints of a design 
credo which has attracted high-profile clients such as 
Adobe, Macromedia, Intel and Capitol Records. 

Since he turned his back on music as a profession 
and began designing flyers and posters, Hillman's 
artistic career has been interwoven with Flash. He 
became Macromedia’s art director at the time when 
the company acquired its prototype, futuresplash, and 
was there to see it christened Flash, and take its first 
tentative steps. He witnessed the Flashturbation of a 


few years ago that marked its aesthetically explosive, 
yet painfully slow-to-download, adolescence. 
Now, having become a sought-after conference 


speaker and creative director of his eponymous design 


company, he continues to play a part in the software 
coming of age: “| think we'll start to see even more 
deeply interactive sites, games and tools built with 
Flash,” Hillman says. “As far as motion graphics go, 
Flash and now LiveMotion give designers and 
non-designers the ability to experiment and grow as 
motion designers. I’m interested in that space where 
innovation can't help but thrive,” he adds. 


It ain't what you move, it’s the way that 
you move it 

Hillman’s book goes to great lengths to reconcile this 
design innovation with a careful consideration of 
concept, environment and inspiration, and in > 


He may look pensive, but 
Hillman Curtis’ company has 
won just about every award 
in the Flash world. He's also 
a regular speaker at all 
manner of design events. 
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Flash and friends 


How Hillman Curtis Inc uses 
outside influences to get the 
most out of Flash... 


1. Use Macromedia's FreeHand to create perfect grid 
elements. Hillman finds plenty of inspiration in the 
work of print designers, which leads him to FreeHand. 
He uses the tool to quickly create grids, adjusting 
their Alpha Channel information to provide subtle and 


economic background graphics. 


2. Use Adobe Premiere and After Effects to 
convert video into vector-based graphic elements. 
Take advantage of the fluidity of film without 
compromising file size thanks to Adobe's digital 


video compositing twins. 


3. Use Sound Forge on Windows and SoundEdit 
on Macs to normalise audio. Sorting out the 
volume threshold of sound samples might require 
the use of a pair of headphones and a fair amount 


of experimentation. 


4. Use a low-level 3D modeller such as Adobe's 
Dimensions, or a more advanced package such as 
3ds max, to create and plan the use of 3D objects in 
your Flash movies. Storyboarding is an essential part 
of bringing 3D sensibilities into a 2D environment, 
and 3D design for the Web should always favour 


refinement and optimisation from the outset. 


5. Use pieces of paper with inspirational words 
written on them, and tape them to your monitor when 
you're designing. It can't do any harm to keep your 


themes in mind. 
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particular, the transcendence of limitations. “If you 
look at limitations, say 56.6K bandwidth, or slow 
CPUs, crappy revs of browsers and so on as demons 
that kill your designs, you'll probably get pretty 
frustrated,” Hillman explains. “But if you look at them 
as allies or tools that help you strip away the 
unessential elements that get in the way of the core 
message or theme then its easier to come up with 
solid, focused design,” he adds. 

Stripping a challenge down to its core and 
approaching it from a fresh perspective is a principle 
underpinning the creative approach of Hillman Curtis 
Inc. Each design element a staff member puts forward 
for inclusion ina project has to be justified in 
accordance with what Hillman describes as the 
‘emotional epicentre’ — the non-literal impact of a 
project on its audience: “We ask clients, or ourselves if 
it’s a personal project, and we listen for the answers 
and words that are spoken with the most excitement,” 
Hillman explains. 

After the research phase, one or two words are 
chosen and these become the theme of the project, 
with every design decision from then on having to 
support the theme. 


A farewell to unnecessary animation 


This process of justification becomes critical when 
designing for motion graphics for the Web: “The way 
you move an element is as important as the element 
itself,” he points out. In Flash Web Design, Hillman 
reserves special thanks for Rob Burgess at 
Macromedia for his mantra of “no gratuitous 
animation” and points out the need to respect 

the environment of the Web audience, where 
multi-tasking attention deficit is king, and file sizes 
should be kept small. 


“It's really easy to get attached to the ‘wow’ elements in 
design, and you start convincing yourself that your 
client won't be as impressed without it. But at the core 
of everything we do as designers is the need to 
communicate, and my goal has always been to find the 
clear and simple, and to identify and eliminate 
anything that detracts from that,” Hillman explains. 
“Hemingway is quoted as saying ‘write the story, take 
out all of the good lines, and see if the story still works’ 
— words to live by,” he adds. 

Inspiration, however, is considered the most 
important aid to the Flash designer’s vision. Hillman’s 
company site has been updated with an inspiration 
section, and its eclecticism is almost an index of the 
future multimedia potential of the Web. The mix 
includes Underworld, installation artist Bill Viola, 
Canadian designer Bruce Mau and the oneiric 
non-linear editing style of director Steven Soderbergh. 

As far as this future is concerned, Hillman 
confesses to having no idea where motion graphics 
will go but does acknowledge that recent refinements 
to Flash’s programming language and the stability of 
its player will see the software develop into a tool for 
implementing highly interactive online applications. 

The 3D work that Hillman’s colleague lan Kovalic is 
currently experimenting with has caught his eye too, 
but design techniques remain the vital ingredients for 
the foreseeable future: “I'd like to see Web design 
continue to evolve. | sound like a contestant in a Miss 
America pageant now, but that evolution is dependent 
on good concepts, innovations, and beginner’s Luck,” he 
says. “As long as we have those things, Web design will 
continue to surprise.” > 
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1. This sequence of stills for the Roger Black Interactive 
Bureau gives you some idea of the principles behind 
Hillman’s work in motion. Bold messages and an economy of 
movement predominate. 


2. “Technical limitations are a gift,” according to Hillman. He 
adds that at the core of his work is the need to find the clear and 
simple and eliminate anything that detracts from that. 


3. The FeedRoom is an online taster for AOL's FeedRoom Web 
showcase. The sequence, with a figure in silhouette hopping, 
skipping and jumping across an interactive graphical landscape, 
was included in Print magazine's Interactive Annual 2001. 


4. Hillman Curtis produced a variety of stark, kinetic 
animations for the SonicNet Flash Radio project. The work was 
featured in /.D. magazine's Interactive Annual, 1999. 


5. The Pavarotti music microsite streamlines its Flash content 
to present visitors with an attention-grabbing download on 
dial up, complete with operatics. 


6. Hillman’s advice to the aspiring designer: “Name a company 
after yourself, and you'll never do sub-par work.” > 
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Ghost in the machine 


“This technique allows me to reuse limited stills, with low file 
sizes to create a feeling of smooth motion,” says Hillman 


Flash Special 


1] “The basic idea is to create a ghost of your 
main image,” he explains, “for example, a still 
from a video shoot, and offset it in time so that it 
hides any jerky motion you might have.” The stills 
shown here are from the hillmancurtis home page 
(www.hillmancurtis.com). This video-like short is 
about 50KB and uses 15 still images culled from a 
30-second video clip. 


4 | “I need to shrink the file size down to about 

60KB or so, so | concentrate only on the area 
where change occurs. In this case the only thing 
that really moves is the person's arm and the cards, 
so | import the full size first frame of the video 
sequence and then create a Photoshop layered 
document with all of the others. Going through 
each layer, | set guides that tell me the tightest area | 
can crop without cutting anything off”. 


At this point Hillman simply adds a new layer, 
selects the keyframe in layer 1 and drags a 
copy of it to the new layer while holding the Option 

key, where he offsets it a frame. 


“Our first step is to produce the images. We 

used a Canon XL1 DV camera to shoot the 
sequence, but any firewire-ready DV camera will 
work, In fact we have even started to use a digital 
still camera for some of our motion spots. The short 
of Matt thumbing through magazines — movie 4 on 
the home page — was shot with the Digital Elph 
(S100) by Canon”. 
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B As Hillman explains, the idea is to use the one 
full first frame at 10KB, as the background and 
then overlay the remaining 14 stills cropped down 
at a ‘cost’ of only 2KB per still. All the images are 
then imported into a symbol in Flash 5, with all the 
stills named sequentially — 01.pct, 02.pct and so on 
so that Flash imports them all in sequence. “I spend 
some time aligning them so that the cropped images 
rest perfectly, or close to perfect, on the 
background. The background image should sit on 
the bottom layer and the cropped images on a new 
layer above it,” he says. 


8 | “Then it’s just a matter of applying an 
appropriate Alpha to the Ghost layer,” he 
says. “In my case, | used 15 per cent. What happens 
is that as your motion happens, the big spaces 
between movements gets filled in with the ghost.” 


“We capture the footage and use a 

video-editing program such as Adobe Premiere 
to select and export sequential frames. If you don't 
have a video-editing tool, use QuickTime Pro. The 
idea is to select the establishing shot and the motion 
stills that precede it, and follow it. In this case we 
selected the best shot of the person holding the card 
full on, and then two stills of him discarding the 
card. By the time | have the sequence complete, | 
have 15 still images. Each image costs me about 
10KB after compression in Flash. That's a 150KB 
short... way too heavy.” 
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6 | The images are then spread out on the 
timeline so that the sequence resembles 

the rhythm of the original video footage. The 
footage is played back in Flash with the timing on, 
but the motion is still very jerky. This is where 
ghosting comes in. “| return from my symbol 
environment to the main stage. From my library, | 
drag my symbol onto the stage. (Notice that | have 
made my symbol an animated graphic, rather than a 
Movie Clip.) Animated graphics stream in one frame 
at a time, while Movie Clips need to download 
entirely prior to playing”. 
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Hillman also inserts keyframes in the Ghost 

layer, about five to a row, and moves the ghost 
image up 10 pixels for one frame and down 10 the 
next. “This gives me a nice little shutter flicker,” he 
explains. “| don't use the shutter flicker except 
when | have to, to distract the viewer's eye during a 
particularly noticeable stiff or jerky move." EEX 


Computer Arts Flash & 
Shockwave Special — COSB0013 
We lead you through getting to 
grips with the new features of 
Flash 5. Other tutorials on Flash 
include basic interfacing 
techniques, how to use motion 
graphics, advanced server 
interaction and writing your own 
3D engine. We also familiarise 
you with the basics of Shockwave 
and introduce you to its scripting 
language Lingo. 

CD We've got demos of Flash 5, 
Director 8, FreeHand 9, Fireworks 
3, Illustrator 9 and After Effects. 
Plus 25 Director behaviours. 


Computer Arts Discover 3D 
Special - COSB0014 

Learn the latest 3D techniques with 
our five in-depth tutorials. Find out 
how lighting can make your 
renderings look more realistic and 
professional and our cover 
illustrator, Bill Fleming, gives expert 
advice on how to master rendering. 
We've got 50 beginner's tips that 
will give you professional results, 
and we review the best software 
programs and graphics cards. 

CD Three complete 3D programs: 
Pixel 3D, Blender 2 and Strata 3D 
and all the files you'll need to do 
the tutorials. 


st £6. Postage free in 


TS 


ae 


Computer Arts Vector 
Illustration Special — COSBO015 
200 Vector tips covering all aspects 
of CorelDRAW 10, FreeHand 9 and 
Illustrator 9 plus a comprehensive 
guide to their interfaces, with 
shortcuts to make life easier. 
Create the cover image using 
Illustrator and our tutorial — and find 
out how to combine /I/ustrator and 
Photoshop. Plus profiles of leading 
artists and everything you need to 
know about typography. 

CD Demos of Iliustrator 9, 
FreeHand 9 and Fontographer plus 
Photoshop 5, animations, plug-ins, 
tutorial files and more. 


Computer Arts Photoshop 
Special — COSB0016 

Six PS6 tutorials on vectors, 
shapes and the Liquify tool (and 
more) to familiarise you with the 
latest upgrade, plus in-depth guides 
to the new interface and the best 
plug-ins. On the Web side, discover 
how the bundled ImageReady 3.0 
can transform your graphics, and, if 
you're looking for inspiration, more 
than 30 top artists spill the beans 
in our special feature. 

CD 27 Photoshop plug-ins including 
eyecandy 4000, xenofex and 
Flaming Pear icons plus demos of 
Illustrator 9 and Photoshop 5.5. 


Computer Arts Web Techniques 
Special —- COSB0017 

33 pages of new tutorials including 
3D effects in Flash 4, crossbrowser 
code in Netscape 6, connecting a 
database to an existing page using 
Dreamweaver UltraDev 4 and the 
latest features in Fireworks 4. We 
also take a look at the future of 
Web design, the secrets of great 
style sheets and come up with 30 
tips that you'll find invaluable. Plus 
add-ons, resources and profiles. 
CD Demos of Dreamweaver 4 & 
UltraDev, Flash 5, Fireworks 4 and 
Netscape 6 as well as more than 
30 of the best add-ons. 


Issue 50 — Code CA050 

Special 50th issue, tutorials in 3D 
Skills, Photoshop and Flash. 

CD Complete version of Merlin VR. 


Issue 51 — Code CA051 

Star awards 2000 - the best 
creative software and hardware. 
CD Full version of Pixels 3D. 


Issue 52 —- Code CA052 
Photoshop for photographers and 
mastering Flash 5 

CD Exclusive Maya demo. 
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Issue 53 — Code CA053 

Style, branding and interactivity 
CD Top of the Pops iQrom™ 
business card, 105 PS6 shapes. 
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Issue 54 - Code CA054 
Dreamweaver 4 demo and tutorial 
CD UltraDev 4, Fireworks 4, Maya 
Paint Effects, 151 PS6 brushes. 


+44 (0)1458 271108 
take out a subscription — see pages 43 & 80 
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Using Gradient Fills 
to create 3D effects 


Add atmosphere to your animation by using 
Gradient Fills to simulate 3D 


he animation is a spoof on the 
classic 1920s song Let's Call 
The Whole Thing Off — so, to 
recreate a dated 1920s 
atmosphere, we've limited the palette to 
brown sepia tones, put fake scratches on 
the ‘celluloid’ and used a couple of tricks 
to give the illusion of degraded film 
footage. The view has also been given a 
sort of ‘what the butler saw’-style oval that 
fades into darkness at the edges. 
Gradient Fills, created within Flash 4, 
were also used extensively to add weight 


to the character and objects and helped 
create a distinctive style. We've finished 
the animation with three buttons, which 
enable the viewer to view it again, e-mail 
Jamie direct, or visit his Website. 

Because Flashallows the creation of 
very complex animations using a 
relatively small amount of memory, it 
opens up the possibility of a strong idea 
catching the collective imagination and 
being e-mailed around the world. And 
this has got to be one of the main 
strengths of Flash. 


Illustration: Jamie Mathieson 


Part 1: Trial and error 


Don't underestimate the value of research and development: rejected 
ideas and dead ends are an important part of the creative process 


Preparation 


Jamie admits that he spent 
longer sketching the expression 
on the Cad’s face on paper than 
he did using the software. 

The soundtrack was similarly 
done and dusted before Flash was 
fired up. 


@ Jamie spent a long time sketching variations 
of the Cad in an attempt to get just the right 
level of casual arrogance in his face. He also played 
around with the idea of straw boaters and canes, 
before finally settling on the cravat, cheroot and 
smoking jacket of the lounge lizard. 
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Ee Once you're happy with your character, scan it 
in and import it into Flash before tracing it onto 
a separate layer using the Pen tool. It's worth 
remembering that any image imported into Flash 
can be scaled up or down in the same way as any 
other element to fit in with the rest. 


The original intention was to use traditional 
flat colours bordered by lines throughout the 

animation, but Jamie wasn't happy with this early 

version. He therefore decided to use Gradient Fills 

to give the illusion of 3D, and dispense with 

lines altogether. 


Part 2: Fading in and out 


This is a neat effect to smooth the transition between scenes in your movie, 
but use with restraint — if your fades are too long or too numerous, you'll lose pace 


Use sparingly 
Bear in mind that this effect can 
be used on any symbol, not just 
big black rectangles, and is great 
for teleportation/ ghost effects, 
Fades can be addictive because 
they're so effective - scenes, 
titles, characters can all be faded 
in. The only problem here is that 
the end results tend to be so 
smooth that they become tedious, 
so don't overdo it. — . — : 
Create a rectangle the same size as your main 
movie stage. It must be solid black, or the 
darkest colour in your current palette. Put this in its 
own layer above everything else in the scene. 
Convert it into a symbol by going Insert>Convert to 
Symbol and call it ‘black screen’. 


Telling the computer to create a motion tween 

will prompt it to work out the intervening 
frames, so that when the movie plays, everything 
should fade into view after ten frames. To get the 
scene to fade to black, do the same thing in reverse, 
and start with a ‘black screen’ symbol of 0 per cent 
Alpha that motion tweens to 100 per cent Alpha. 


Then create a keyframe 10 frames along 

this timeline and select your ‘black screen’ 
symbol. Select Modify>Instance and the Colour 
Effect tab. Select Alpha as the Effect and slide it 
down to 0 per cent. 


It's also worth knowing that you can alter 
values other than the Alpha, or Translucency 


within your symbols, namely Brightness, Tint and 


Special. To see this in action, note how the buttons 


at the end of the animation light up when the 


mouse pointer is passed over them. 


By doing this, you have created two frames, 
one with the symbol ‘black screen’ totally 
opaque, and one with it totally transparent. Right- 
click on any frame between the original frame and 
the new keyframe and select Create Motion Tween. 


6 | This was achieved by creating a symbol called 
‘phone’, then creating a button with three 
different instances of this symbol, all with different 
Brightness values. The button in its ‘up’ state has a 
normal Brightness of O per cent, over is +27 per cent 
and down is -27 per cent. The upshot of this is that 
when you hover over the button, it lights up, and 
when you press it, it goes dark. > 
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Part 3: Using Gradient Fills to create the illusion of 3D 


This technique is used extensively throughout the animation, and if 
done correctly, does away with the need for lines to indicate outlines 


Terry who? 


This technique owes a lot to the 
air-brushed style of Terry 
Gilliam's Monty Python 
animation. Similarly, Flash makes 
cut-out style animation very easy, 
a technique Mr Gilliam was very 
fond of. Not to mention the 
Pythons’ rude Noel Coward 

spoof in The Meaning of Life. Are 
there no new ideas? 


— Using your colour range, create a series of . . 

o linear and radial varieties of the same gradient This can be confusing, because the colour that 
of the Cad's face as a template. Divide it up within Flash's Colour window. You need flesh appears in the middle of a Gradient Fill is the 

into a series of shapes, again using a bright red. This shades and tones, and darker varieties for the hair. 


one on the far left of your selected colours. Also 
may look garish, but the lines are easily removed For this purpose, it's worth remembering that the remember that you aren't limited to just two 
and making them such a bright colour helps keep lightest colour should appear in the middle of a colours, as this example shows. Then fill each 
track of the boundaries between fills. This needs to Gradient Fill to act as a highlight and give the segment of the face with a Gradient Fill using the 


be done on another layer created above the original. __ illusion of a curve or sphere. 


Paint Bucket tool. 


To ensure that the transition from a dark toa 


G You must be careful when adjusting the — 
light tone helps give the illusion of a curve, qualities of your fills to ensure that similar G For example, on the Cad's right cheek (from 
adjust each fill in turn using the Transform Fill tones don't border one another. If this occurs, our point of view) the gradient below his ear 
Modifier button. This controller has three handles the edges of elements will be lost. This is tricky doesn't follow the rest of his face, being darker next 
which enable you to rotate, scale and skew the fill. to do and in some cases you may need to add 


to his nose. However, had it not been filled that way, 


the definition of the edge of his nose would have 
cartoon nature of the exercise helps,because we're been lost. 


not after total realism. 


You can also move the centre point of the fill, which extra shapes to the face to avoid this. Luckily, the 
makes a big difference to the effect. 


- —— This process can be used on all the elements 
Think carefully about where the light is falling within the animation, with a darker or lighter 


on an object. The shadow should always be on _ selection of Gradient Fills being used depending on 9 | The portholes give the illusion of a strong light 
the opposing side. Is one part of an object casting a the subject. The smoking jacket, for example, is source from the left, which casts a shadow on 
shadow? Can this shadow be mimicked with a composed of dozens of squares filled with the same _ the concave centre of the hatch. In reality, this effect 
carefully placed fill? Once you're happy with the dark Gradient Fill, and manually adjusted to ensure is caused by two identical fills, one inside the other, 
effect, remove the red guide lines. that the highlight sits correctly in each square. rotated in opposite directions. 
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Part 4: Motion 


Minimal cut-out style animation can still be effective and is quick and easy 
to achieve within Flash, provided the elements are prepared beforehand 


Lip Sink? 

Pokémon and South Park get 
away with minimal lip-synch, so 
don't feel the need to knock 
yourself out getting it syllable 
perfect. If the ideas are strong 
enough, it'll work, as long as the 
mouth opens and closes in the 
right places. 


uy To animate any element through the process 
of motion tweening, you must first select it 
and convert it to a symbol. For this exercise, we're 
going to move the arm, so select that and go 
Insert>Convert to Symbol. 


4 | Now create a keyframe ten frames on and 
rotate the arm slightly upwards. Right-click 
any intervening frame and select Create Motion 
Tween. Test the movie. The arm should now 
smoothly rotate from its position at rest to the 
position of the keyframe. 


2 | Now place the arm symbol on its own layer. 
The layer should be behind the torso of your 
figure and in front of the background items. Also, 
you should ensure that the torso overlaps the arm 
slightly, so that when the arm rotates, you aren't left 
with an unsightly gap. 
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For the movement of the mouth, Jamie 

created a new movie clip called ‘head’ which 
was exactly the same frame length as his soundtrack 
song. He experimented with various weird and 
wonderful lip-synching options, before settling for 
the basic mouth open/mouth closed, with an 
additional wider mouth shape for those long notes. 


Pad Now we need to reposition the centre point 
of the arm symbol to ensure that it pivots on 
the shoulder joint, rather than the centre of the 
symbol. This is achieved by selecting Modify> 
Transform>Edit Centre. Move the centre point to 
the shoulder area. 


G The sea (visible through the porthole) gives the 
illusion of infinite waves — it's actually a looped 
five frame animation, as this transparency shows. 


Part 5: Interaction 


Flash offers a great deal of interaction possibilities, one of which is the facility which enables the viewer to 
contact you through e-mail, or visit your Website 


E-Mither 


Embedding your e-mail address 
within a Flash animation is a 
trick that should be used with 
caution: if your work becomes 
popular and is forwarded to 

half the world, you may find 
your in-box groaning under the 
strain. It's wise to set-up another 
e-mail account just for this 
purpose, and keep another 
account for normal mail. 


G Create a button through Insert>New 
Symbol>Button. You are then presented with a 
four frame animation, labelled: up, over, down and 
hit. These represent various states of the button. If 
you like, you can put different images in each of 
these four frames, or variants on the same image. 


eS Once you have created your button, place it 
within your animation. To add the e-mail script 
to the button, select it and go to Modify>Instance 
>Actions and then press the ‘+' button. From the 
scrolldown list, select ‘get URL’ and enter: 
mailto:whoever@wherever.com?subject=Whatever. 


3 | This will fire up the e-mail program of the 
viewer and open a blank message with the 
subject line of ‘Whatever’. To send the viewer to 
your Website, the procedure is identical, but in the 
‘get URL’ window, just type the Web address, 
including the http://. Your viewer can now contact 
you and view more of your work. > 
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Part 6: Adding the years 


A few simple touches and effects to give your animation the 
illusion of old atmospheric film footage 


Talkies? 


Although this animation uses 

a vocal soundtrack, dating 

your animation in this way is a 
great reason to dispense with 
vocal audio altogether and make 
do with cue-cards to emulate 
silent films. You'll also greatly 
decrease the file size and the 
download time. 


Now create a Radial gradient of two colours, 
the outside of which is your darkest colour, 


ae The illusion of viewing the entire animation 
fading to a totally translucent colour in the centre. 


inside a ‘What the butler saw' machine, with 


the image fading into darkness at the edges is very To make the colour totally translucent, adjust the oO Another nice ageing technique is the 

easy to achieve. Begin by creating another large Alpha Percentage counter within the colour window appearance of scratches on celluloid. To 
rectangle the exact size of your main movie stage. to Zero. Now fill the large rectangle with this achieve this, create a separate movie called 

Place your rectangle on its own layer above all the gradient and adjust the size of the translucent area Scratches by going to Insert>New Symbol>Movie. 
other layers of the movie, but immediately below to create a large oval through which the other Within this movie, use the Line tool draw a straight 
the layer where the ‘black screen’ fades in and out. elements can be viewed. vertical line down the centre of the stage area. 


~ SEER a To ensure that the scratches loop, place an 
G Repeat this process on five different layers, ActionScript instruction into the Properties of 
varying factors such as width of line, speed the last frame. This is done by selecting 
4 | Now create a keyframe a few frames down and direction of movement and repetition. Don't Modify>Frame>Actions and choosing ‘Go to and 
the timeline and move the line horizontally a pay too much attention to making it smooth, or Play(1)'. Also ensure that you tick the box marked 
little. Between these two keyframes create a shape hiding the looped nature of the scratches, because ‘Go to and Play’. This makes the scratches loop 
tween, which will fill in the intervening frames for any errors of this nature will simply add to the aged forever within the confines of any scene they are 
you. Voila, your first scratch! feel of the piece. placed into. 


AT IDARNED 


Canl 


BY Jamie NVATHIESON 


AND Pate Benner] 


Carefully thinking about your use of typeface Another touch that dates the piece is the 


can also help add the years. In this case, the G opening page of text, which tells the tale of 9 | With all the elements in place, and a suitably 
typeface RSVP evoked the 1920s quite well. Try to this footage being recovered from the sunken wreck crackly sampled soundtrack courtesy of 

stick to as few different ones as possible, because of a steamship. It adds a nice touch of atmosphere, Napster, the spoof is complete, harking back to 
there is nothing more amateurish than using ten sets the scene well, and is another excuse to use those heady days of luxury steamships, fraudulent 
wacky typefaces in one project. that lovely font. showmen and general decadence. EEE 


Flash Special 


z 
zg 
E 
Fs 
a 
z 
‘ane 9 
¢ 
3 
3 
a 


JEFFREY VEEN 


ttp://www.newriders.com 


ttp://www.hillmancurtis.com order now @ amazoncouk. 


ttp://www.amazon.co.uk 


Dynamic menus 


It's simple to prompt Flash into updating your menus without the need 
for any manual alterations. Here's how... 


ou'll have read it countless 
times that good navigation 
is probably the single most 
important design feature of 
an effective Website. Unfortunately, few 
of these of these arbiters of ‘what makes 
great Web’ offer a solution to the problem 
of organising a great deal of information 
within a relatively small and slow-to- 
load space. 

Nevertheless, designers have risen to 
the challenge, and many of the solutions 
have involved a cascading links system. 
The most famous example of this is 
probably the Windows Explorer/Mac OS 
-style tree menu, where big containers 
open out to reveal smaller containers 


and so forth, ad infinitum... In some cases 
these have been very successful - see 
www.webmonkey.com for instance. 

But these have little currency when it 
comes to the favoured banner-style 
navigation that runs across the top of 
Web pages: here the dropdown menu 
appears to have won the day - for the 
time being at least. 

With a little JavaScript knowledge 
and a sneak peek at www.computerarts. 
co.uk/web/dhtml, these are relatively 
simple to hash up in DHTML, if a little 
wobbly in Netscape 4. But Flash is 
storming the Web, and people are 
looking for similar solutions to grace 
their SWFfed-up Websites. 


Illustration: Paul Price [e] p@ulprice.com [t] 0207237 7652 


The trouble with Flash, however, is that 
unlike DHTML layers, a menu graphic 
won't automatically accommodate 
varying numbers or links. Every time you 
want to change one of the links, you'll 
need to bury into your original FLA file 
and export and embed the whole thing 
again, which is a major inconvenience. 
Unless, that is, you follow a few tips 
and tricks from the pros, which we 
propose to share with you here. We're 
going to create a dynamic Flash menu 
system which refers to an external, 
easy-to-update text file to find out what 
the links should be, and then intelligently 
builds the menus as they arrive in the 
user’s browser. Now that is fantastic. 


Part 1: Simple menus 


To make good sense of the dynamics involved, we first need to build some easier, non-dynamic dropdowns 


Lite byte 


When you start on a complex 
project in Flash, it’s usually 


easier to start with a ‘lite’ version, 


so you can figure out how the 
basics work - then steadily build 
in new features one by one, until 
you reach your final objective. 
This will save you a lot of pain 
and frustration! 


Iroet Mody Tent Contik Wedow Heb a 


Create a new movie, and design or paste in 

one header graphic, excluding the text. Select 
it all, hit F8 and create a button symbol called 
‘header button’. Then add in and align the menu 
background on a new layer, and turn this into a 
button called ‘menu background’. 


Here's a simple design for the menu system we 

want to end up with —it’s on the CD as 
design. fla if you want to use it, or you can create 
your own design. We'll start by creating just a single 
menu, and then duplicating this. 


POC oe 


4 | On the background layer, drag frame 1 to 
frame 2, so the background only shows at 
frame 2. Then select this background button, so 5 | Copy these three lines and paste them after 

your Actions palette says Object Actions at the top, the closing curly bracket, }. Change the event 
and here add a Basic Actions>Go To action. Set the to on(rollOut), and set the ‘goto’ frame to 1. Then 
event to on(rollOver), and set the ‘goto’ frame to2. —_ copy the first three lines again, and click Scene 1 at 
Uncheck the gotoAndPlay box. the top of the timeline to return to the main movie. 


ly Tet Contiol Weedon Hele vis ; 
“ASH OBE 


on Crollover) { 


telltarget C"menul") { 
gotoAndstop (2); 
+ 


} 
on CroTlout) { 
tellTarget C"menul") { 
_gotoandstop (1); 
} 
} 
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Copy all these lines and paste them at the end, 8 | Select Control>Test Movie and you should find 


changing the event to on(rollOut), and the 
‘goto’ frame to 1. Finally, select the dot that 
represents your menu clip on the stage, and name it 
‘menu1' in your Instance palette. 


that if you roll over the header, the menu 
appears, and stays there until you roll out of the 
menu or the header. Pretty good, huh? If you're 
stuck, check out the stage’ file on the CD. 


Madly Tet Contol Weedon Heb 
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Now select the menu background and hit F8 

again, turning it into a Movie Clip symbol 
called ‘menu’. Double-click this to edit it, create a 
new layer called ‘actions’, and double-click frame 1 
to show your Action palette. Add a Basic 
Actions>Stop action here. 


Mosty “Tet Cora Wrdow Hep F 
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Select your header button here, click your 

Actions palette, and paste the three copied 
lines in here. Then select the first line and add a 
basic Actions>Tell Target action. In the Target box 
type ‘menut' (excluding the quote marks), and drag 
the gotoAndStop line within its curly braces. 


mW trolrovery T 


gotoandstop (2); 


mn (rollout) { 
gotoAndstop (1); 


9 | Now you can go back and add text and 
rollover effects to your header. Then 
double-click the menu’ clip and add some links on a 
new layer in here. You'll need to turn these into 
button symbols. To make sure that they don't 
interfere with the background button which keeps 
the menu open, add all the ActionScript lines from 
this to your links too. See the stage’ file. > 
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Part 2: Animated menus 


It would be more impressive, though, if our menus could open 
and close, rather than just appear and disappear... 


Tweening vs 
ActionScript 


Tweening in Flash is the simple 
fastest way to get something to 
move. The only trouble is, it isn't 
easy to get a tween to go 
backwards, or make its length, 
speed and extent dependent on 
other factors in your movie. 
Where you need the movie to 
intelligently control its own 
animation, ActionScript is 

the answer, 


G There are several ways to get these menus 
moving and in this case the easiest isn't 
tweening, unusually, but rather ActionScript. In 
your menu’ clip, drag the layers for the background 
and links back to frame 1, and make sure all layers 
go up to frame 3. 


on rollover) { 
tellTarget ("menul”) { 
direction = 1; 
play O; 
} 


} 
on (rollout) { 
tellTarget ("menul") { 


4 | Don't forget you also need to paste this 
code into the link buttons within the menu, 
as before. And also as before, click back to your 
main movie, and replace the ‘goto’ lines with the 
direction and Play lines (still within your Tell 
Targets) in the header button, setting direction 
to 1 or -1 as appropriate. 


Next add an Actions>SetProperty action. In 
the Property dropdown choose _y, in the 
Target box type ‘this’, meaning this Movie Clip, and 
in the Value box type ‘newPos'. You need to set 

both the Target and the Value as expressions. 


To control the direction of movement, we're 
going to add a variable called, oddly enough, 
‘direction’. Select frame 1, and add an Actions>Set 
Variable after the Stop. In the Variable box put 
direction, and in the Value box type ‘0' (no, not the 
quotes). Check the Expression box next to this. 
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Now double-click your menu1 clip to edit it 

again, and add keyframes on your Actions 
layer here at frames 2 and 3. At frame 3 adda 
gotoAndPlay action, sending the movie to frame 2, 
so it continues in a loop. We're going to use frame 2 
to control the position of the menu. 


8 | Finally, click back to your main movie, check 
that your Menu layer is below the Header 
layer, and add a new layer between this. Here draw 
a large blank square the colour of your background, 
bottom-aligned with the header, to obscure the 
menu when it is behind the header. Then drag your 
menu’ clip so its bottom also aligns with the header. 


) 
Woon (rollout) { 


direction = -1; 
sPlay 0; 


Select the background button, and delete the 
‘goto’ action in the on(rollOver) event. Instead, 
use Set Variable to add the line direction=1; , 
followed by a Play action. Do the same for the 
on(rollOut), but instead set direction=-1. 


Select frame 2, and use Set Variable to add a 
new variable called ‘oldPos’. Set the value to 
an expression, and in Value box type ‘_y' - so you've 
got ‘oldPos = _y', which gives the Y position. Now 
set another variable, ‘newPos = oldPos + (direction 
* 10)' - the value is again an expression. The 
number 10 controls the speed of motion. 


an { 
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gotoAndStop (2); 


pn (rollout) { 
gotoandStop (1); 


Test this and you should find that the menu 

moves up and down as you move the mouse 
over it - which is great, except things really aren't 
quite right yet: it never stops moving! If you're 
stuck, compare the movie to stage2 on the CD. 


Part 3: Stop! 


It's one thing to move the menu, but we've also got to get it to stop 
in the right place — which involves a bit of intelligent Flash... 


If(...) checking 


If you haven't discovered the 
iff...) action, get to it now. Once 
you find out how you can use 
ActionScript to check out an 
aspect of the movie, and then 
send an instruction depending on 
that, your movie will move into a 
whole new dimension of 
interactive dynamics. 


stop O; 

direction = 0; 
originalPos = _y; 
openPos = _y + height; 


@ Double-click the menu1 clip, and at frame 1 
set a variable called ‘originalPos’. In the Value 
box type ‘_y’, and set it to an expression. Then set 
another variable, ‘openPos’, and for the value type 
"_y + height’ which is also an expression. 


oldPos = _y; 
neweos = oldPos+(direction*10); 

if Gdirection==-1 and newPoss=originalPos) { 
setProperty (this, _y, newPos); 

} 
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2 | These variables will store our resting points 
through the action. Now we need to use them: 
go to frame 2, and add an Actions>If action. In the 
Condition box type ‘direction==-1 and 
newPos>=originalPos’, then drag the setProperty 
line between the If action's curly braces. 


newPos = oldPos+(direction*10); 
if Girectionw=-1 and newPos>moriginalPos) {| 
setProperty (this, _y, newPos); 


if Gdirection==1 and newPos<=openPos) { 
setProperty (this, _y, neweos); 


a Now copy and paste the entire If clause and its 
contents after the last line, and change the 
condition here to ‘direction==1 and 
newPos<=openPos'. Now if you check your movie, 
you should find it all works right. If not, check our 
stage3 file on your CD. 


Part 4: External variables 


To make your menus easy to update, you can use an external text file holding all the relevant information 


& Untitled - Notepad 


File Edt Search Help 


menulLinkiTitle=First+link 


ay Open a text file, and ‘numMenus=1'. Then on 
a new line, type ‘menu1Links=4'. Then on the 
next line type ‘menu1Link1Title=" and add a title for 
the first link in your first menu. Don't use any 
unusual characters for the time being, and use + 
instead of any spaces. 


18 JB] Fa //ww goog. com seach ecompuervatiemanearelitnG~GoogeeSeach 


"“ |computer arts magazine 
{'m Feeling Lucky 


Google Search 


computerants co uk/ - 62k - Cached - Similar pages 


Computer Arts Magazine: Latest issues 
Start here. Headlines. Snippets. Events. Latest tutorials. Web 
& New Loe Photoshop a 3D & Animation. Other tutoriais. ... 


4 | This format is called URL form ae. and 
is the format used to pass information 
between files by http. Special characters have a 
special encoding — %20 for instance represents a 
space, although you can use + too. You'll often see 
this kind of text in the address bar of your browser 
when you do a Web search, for example. 


menulLink1Title=First+link 
menulLink1Url=gallery.htm 

menuiLink2Title=Second+link 
menulLink2Url=gallery2,htm 

menulLink3Title=Third+link 
menulLink3Url=gallery3.htm 
ImenulLink4Title=Fourth+link 
menulLink5Url=gallery4|. htm 


On the next line, type ‘menu1Link2Url="' and 
give an address you'd like this link to lead to — 
the file gallery.htm for instance. And then add six 
more lines, giving menu1Link2Title, 
menu1Link2Url, menu1Link3Title, and so on. 


2 emeercniczTide=Tardelrd:2inernCLinkUrtgallery3.h 
nmenudiink sTitle=Fourth einkzBmens2UnkSurtegallery4 hen 


ra 
Munks=demenvsLnklThe-FretstnksemenutLnkiUri=galery. 
Ink Titte=Third +ink4amenudt ink 3Url=gallery3-himamen 


g' It's a hassle to do this yourself, so we've 
included a special URL form encoder on 

the CD for you. Simply put your variables on 
separate lines in the top box, with all the usual 
characters, spaces and so on, then click the English 
to Flash translate button. 


File Edt Search Help 
numMenus=1&6menulLinks=4&menulLink1Ti 
tle=First+link&menulLinklUrl=gallery 
-htm&menulLink2Title=Second+link&men 
ulLink2Url=gallery2.htm&menu1Link3Ti 
tle=Third+link&menulLink3Url=gallery 
3. htm&menulLink4Title=Fourth+link&me 
nulLinkS5Url=gallery4.htm 


This process defines the links for your menus, 

and we're going to tell Flash to look at this text 
file and set up the menus according to what it says. 
First, though, you need put all the lines on a single 
line, but with an ‘&' character in-between. 


fegallecy hem@menu2uink2Title=Second+ink2@menu2Link2ur=gall 

2r72.hema&menuQLink Title= Third +{ink2amenuZLink3Url=gallery3.h 
\Bmenu2Link-4Title=Fourth +ink 2amenu2unkSUrlegallerys. heme 
yeNUSLINKs-=<4&menu3Unk 1Tite=First-+ink3Bmenu3Link LUr=gadl 

ery htmamenuSLinkZTitle=Second+ link IsmenuaLink2Url=gallery2. 


inkS=4&menuSLnk  Ttle=First slink SBmenuSink LUri=gallery Ate 

nuSLinkZTitle=Second-+inkStmenuSLink2Ued=galiary2.htmBrnen 
(SLunk Title= Third +inkS@menuSLinksUrl=gallery3.htmamenuSLink 
Title= Fourth slink S@enenuSLinkSUrt=gallery$.ftr8% 2085. 


You can also translate encoded variables back 

into a more readable format, by pasting in the 
encoded data and clicking the Flash to English 
button. This is useful if you need to tweak or update 
an existing variables file, without the hassle of 
ploughing through peculiar-looking text. > 
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Part 5: Plugging it in 


Next you need to set up Flash to load in the text file, and then continue playing when it's loaded 


Easy update 


Using external text files to control 
the content of your Flash movies 
is a very powerful tool. This 
means you can quickly update 
them without having to go back 
and edit the complex FLA file. 
Clients will love you if you can 
provide them with a simple way to 
update their sites without having 
to come back to you every time. 
And if you want, you can easily 
plug this text file into a database, 
via ASR JSP or similar. 
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Make sure all the layers continue up to 

frame 2, and then drag frame 1 for your 
menu, header and other menu-specific layers to 
frame 2, so frame 1 is blank for these. On the 
Actions layer, add a keyframe at frame 2, and add 
Stop actions at frames 1 and 2. 


1] Once you're happy with your text file, save it 
as vars1.txt in the same directory as your Flash 
file, or use the version on the CD. Then open up 
your Flash movie and add two new layers in the 
main timeline, called ‘actions’ and ‘data’. 
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a Select this clip, and name this instance of it 
data as well in your Instance palette. Then, on 
frame 1 of the Actions layer add an 
Actions>LoadVariables action, setting the URL to 
the vars1.txt file, the Location dropdown to Target 
and the Location to data. 


This loads the variables into your data clip. The 

next bit checks for when loading is complete: 
select your data clip, and add a Play action. In the 
onClipEvent line that appears, check the event is set 
to ‘data’. And that's it. 


3 The idea is, we're going to load the variables 

text file at frame 1, check for when its 
completed loading, and then move onto frame 2, 
where the menus are assembled. We do this using a 
special Movie Clip - draw a circle off the side of 
your movie on the Data layer, and hit F8 to turn it 
into a Movie Clip symbol called ‘data’. 


6 | To check everything is working, add an 
Actions>Trace action, setting the message to 
‘numMenus'’, as an expression. If all is well, when 
you hit Control>Test Movie you should see the 
value you gave for numMenus (1) appear in the 
Output window. You can delete this action later. 


Part 6: Interpreting the info 


Okay, so we've loaded in the variables — now we've got to make Flash do something with them... 
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‘4 
on (rollout) { 


telltarget ("../") { 
direction = -1; 
yy 1) 


1] Our first job here is to set up the link text fields 
as dynamic, so they can be governed by 2 Delete the rest of your links, and then double- 


variables. Double-click your menu’ clip to edit it, 
select one of your links (background, text and all), 
and hit F8 to turn it into a Movie Clip symbol called 
‘link clip’. Then name this instance ‘link1' in your 
Instance palette. 


click your link’ clip to edit this. Open the 
button’s Actions palette, and wrap tellTarget("../") 
actions around both pairs of direction and Play() 
lines, to apply them to the parent Movie Clip, 
following the change of level of this button. 


Add a getURL action to this object at the end, 

setting its event to on(release), and setting the 
URL as an expression, to ‘theLink’. Then select the 
text field itself, and in your Text Options, set the first 
dropdown to Dynamic Text, and type ‘theTitle’ in 
the Variable field. 


4 | Now go back to the menu clip, duplicate and 
move the link clip here for each link to appear 
in the menu, renaming them link2, link3 and link4. 
In principle we're ready to go, except Flash stores 
variables locally in Movie Clips, and they're in the 
data clip, the wrong place all together... 


telitarget (root) { 
lon 


nextFrame 

i 

for Gislj ican 
num inks 
for © 


= eval C'men 
—root.menu"+is". ink" +j¢' 


5 | So we need to go back to onClipEvent of this, 
and add some code redirecting the different 
variables to the appropriate Movie Clip for each link, 
and renaming them theTitle and theLink, as we used 
above. This is a little complex; the code is this: 
for (i=1; i<=numMenus; i++) { 
numLinks = eval(“menu" +i+" Links"); 
for (j=1; j<=numLinks; j++) { 
theTitle = eval(“menu" +i+" Link" +j+" Title”); 
set (“_root.menu" +i+" link" +j+".theTitle”, 
theTitle); 
theLink = eval(“menu" +i+" Link” +j+"Url"); 
set (“_root.menu"+i+" link" +j+".theLink”, 
theLink); 
} 
} 


business Portrola meni 


| 


G You can copy and paste this from the 
translateData.txt file on the CD if you like. 
Now you should find that everything is working 
perfectly: increase the number of menus in the text 
file, and copy the menu clip, renaming it menu2, 
menu3 and so on. You should have an excellent 
4-link menu system... Check out the stage6 file on 
the CD if you're stuck, 


Part 7: Dynamics 


What if you want to have different numbers of easily-changable links in your menus? 


Tough stuff 

This final stage really is the 

hardest, because it involves 

coding a whole new level of mc lipevent (data) {| _ 
telltarget ("_root") 

intelligence into your Flash nextFrame ©; 


} 

for Cs i <enumMenus ; foe) { 
rine eval menu"+i+"Links"); 
set ("_ root. menu" Fs . 


movie, a kind of articficial 
self-consciousness. But it’s 


fuml inks); 


for (551; j<qnum +) { 
eTicle = evalCmenu'si4°Link'45o°Ti tle"); 
Set, Croot.menu”+i+". inka" ,theTi ste" aS 
thetink = eval(menu"s1+"Linh +i+" url"): 
set C"_root.menu"+i+". link"+j+".theLink”, th 


well worth it - and if you get 
stuck, just check out the final file 
‘on your cover CD. 


Unelbatecat 


e The first thing you need to do is add a line to 


the onClipEvent for your data clip, sending 
information about the number of links to each of 
the relevant menus. If you click Expert mode for the 
Actions palette corner menu, you can just type this 
in, just below the numLinks=... line: 


set ("_root.menu"+i+".numLinks", numLinks); 


= GgerProperty(” inkl", 


height>*mumtinks) - 20; 


4 | Now you need to add some new lines to the 
first frame on the Actions layer. First you need 
to change the settings for your originalPos and 
openPos variables, to reflect the dynamics and 
changes we've made: 

openPos = _y 

originalPos = _y - (getProperty(“link1", 
_height)*numLinks) - 20; 


Lina 2 toed evnthes [yern2 ba”. "daa 


Now create a new variables text file, vars2.txt, 

with different numbers of links for the different 
sections, or use the one on the CD. On frame 1 of 
the Actions layer in the main timeline, change the 
loadVariables action to load this new file. Next, you 
need to edit your menu clip... 


ri gina PoE =-y- 


» chet ght)*numi inks) - 
‘or Cimd 


(getProperty(" linkl 
fconominks; i4s0 { 


dupiicatemovieclip ¢ Tr 
linkPos = getProperty(™ Hinkel 
setProperty ¢"link'"4¥, _y, 


Vink“s4, 4); 
(GetPropertyC"link"+i, he 


Next you need to recurse through each of 
the links duplicating your link1 clip and 
place each clone in the right position: 
for (i=2; i<=numLinks; i++) { 
duplicateMovieClip (“link1", “link"+i, i); 
linkPos = getProperty(“link" +i, 
_y)+(getProperty(“link" +i, _height)*(i-1)-1); 
setProperty (“link" +i, _y, linkPos); 
} 


You also need to get the menu and its background 
in the right positions: 

setProperty(“menuBg", _y, getProperty(“menuBg”", 
_y)+(getProperty(“link1", _height)*numLinks)+5); 
setProperty (this, _y, originalPos); 


a First, delete all the link clips except the first, 
and move this one down to just below the 
header. Then stretch the background button to the 
maximum length any menu could be, and align its 
bottom with the bottom of the header. Finally, hit 
F8 to turn this into a Movie Clip called menuBG, and 
call it this in your Instance palette too. 


news SINeSS — Parra ewe Conran. 


G Finally, you need to make some tweaks 

in the main timeline: give every layer an 
extra frame and drag frame 2 of the Actions 
layer here to frame 3, placing another keyframe 
at 2 with a play() action. Then finally, you need to 


copy the recursive loop for (i=...){ ... }} and paste 
this into frame 3 of the Actions layer, within a 
with(data){ ... } command. This is a little complex — 
check what you've got against our final version, 
stage7.flaon the CD. EE 
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Developed for Nike, the Bill Bowerman Story Web presentation 
(www.nike.com/features/bowerman) is another of Second 
Story's Flash-based success stories. Making extensive use of 
photography, music and narration, it has more in common witha 
music video than a standard Web page. 


Flash Special 


second Story 


Multimedia design studio Second story is on a mission to ‘elevate the art of storytelling’. Company 
founder Brad Johnson discusses the role of Flash in creating leading edge presentations 


ow one of the most respected multimedia 
presentation design studios around, 
Portland's Second Story was actually 
conceived back in 1994 as ‘Brad Johnson 
Presents’. ‘Pinch’, a promotional mailout of a floppy 
disk-based Director presentation heralded its arrival. 
“The ‘Pinch’ product, created by a fictitious 
clothespin manufacturer, takes audiences on a 
humorous tour of product marketing, from a 
demonstration in quality clothespin engineering, to an 
overview of the performance of various woods in 
diverse climates,” explains Brad. From working mostly 
solo on that non-interactive showcase, he has steadily 
built the company, the nine staff now working with him 
on content for such high profile clients as The 
Discovery Channel, National Geographic and Kodak. 
“| came to Web development from a background in 
painting, a creative endeavour for the individual,” he 
says. “As a painter, projects evolved through their own 
inherent processes. The process was often difficult, and 
almost always unpredictable. While ultimately it had an 


“The biggest changes involve the nature of the 


experiences we create,” says Second Story’s 
Brad Johnson. “The Web design community 
was initially populated by people with 
backgrounds in traditional print design. The 


made ‘pages’. These pages had ‘headers’, 
‘banners’ and ‘layouts’. You would click on 


Flash and the changing face of Web design 


something, then another ‘page’ would load. 
Users leapfrogged from one Page to the next. 
You could make a blueprint that visualised the 
relationship between these pages. We were 
inspired by magazines and books, and 
language of the medium was print based-Web architecture helped give structure to the 
relationship of the parts. Pages are dying, 
bandwidth is expanding, and interactive 


end, it was very much about the means. Web design is 
not about the means, and a solitary individual is rarely 
capable of commanding facility with the diversity and 
depths of skill sets required to create the kind of projects 
we do today. | had to learn a new way to be creative.” 


Dream project 


Second Story first used Flash in 1997, when creating a 
Website for Dreamworks Records. “It was one of our 
Most involved, interactive, dynamic and media-rich 
projects. The Website’s function is to provide an arena 
for interactive browsing. Before the advent of CDs, 
designers for record marketers enjoyed the luxury of 
vinyl formats in which a lot of real estate could be used 
to promote an album. Consumers would ‘browse’ the 
racks ina record store, experiencing the art, 
information, copy, and so on, printed all over the album 
cover, to get a sense of the music inside.” 

The goal with the Website was to create an 
interactive equivalent, with users browsing album 


from page to page. 


experiences are more fluid, connected and 
continuous. What we do is becoming more 
cinematic and cohesive, and less like jumping 


“Ideas need to be storyboarded, we make 
‘experience maps’ not just diagrams and 
blueprints. We are turning more to 
documentary filmmakers for inspiration than 


Covers or searching through the label discography, 
full-screen visuals, copy, animation and audio to 
accompany each album. 

“These ‘interactive covers’ were created in Flash by 
different artists inspired by the music, each as unique 
as the album it promotes. Many of the tracks on each 
album are available to listen to in three different audio 
formats, and every music video is streamed on 
demand. Going deeper, users can link directly to an 
online retailer of their choice, get in-depth 
biographical information, tour dates, and links to 
artist sites. We developed an interface to fill the 
user's desktop, a stage in which they can browse in 
a fun, engaging, and interactive way. Flash made it 
all possible.” 

For one thing, using Flash meant the presentation 
wasn't fixed to a single resolution. It also ensured that 
the site would look and behave identically for users on 
both 4.0 generation platforms without the need for 
Second Story to author more than one document. 
Flash’s streaming capabilities also enabled the use of 


to magazine or print designers. We are 


orchestrating experiences that involve 


narration, captions, copy, footage, 


photography, illustration, information graphics, 


animation and music. As our medium 


matures, it has a lot more to do with narrative 


storytelling and filmmaking than design alone. 


Design just plays a part, it isn't everything.” 
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instant pop-ups. “We could integrate short sound loops 
in the background of each file to give an immediate 
sense of the music, full-screen animation for a 
cinematic experience, use the exact fonts from the 
album art, and accomplish all of this in files that were 
between 60 and 100K!” 


Four play 


“We only rely on Flash where it’s appropriate,” explains 
Brad. Second Story doesn't use information retrieval- 
based sites, for example, or sites where users come for 
fast and repeated, ‘surgical’ style access”. Its 
usefulness lies in the creation of entertainment or 
interactive educational content: “We borrow heavily 
from the multimedia and film traditions. These 
traditions and experiences are only achievable with 
media authoring tools like Flash and Director.” 

“Second Story develops interactive experiences for 
a variety of media ona range of topics, but the process 
usually starts the same way,” Says Brad. “We immerse 
ourselves in the content, ask how to best tell the story 
with the available assets, and develop a strategy in 
tandem with our client”. 

The workflow for each project divides into four 
distinct modules: concepting, prototyping, building and 
quality assurance. “Each stage consists of milestones 
for the visual design and for the architectural design. 
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When each element is isolated at each stage, clients 
can focus on the merits of the information design, for 
example, without the distraction of graphics. 
Alternatively, the look and feel can be evaluated 
against other treatments without diverting attention 
to usability. As the stages progress, these two 
components become integrated into one 
indistinguishable experience built on strong, clearly 
conceived foundations.” 

Unsurprisingly, Second Story does sometimes find 
itself having to reign in the more lavish ideas to 
accommodate the limitations of current Web and user 
technology. ‘It isn't always the graphical elements that 
need to be reined in,” Brad reveals. “Flash is excellent 
at delivering a lot of effect with very little bandwidth 
expenditure, though when you try to pump too many 
bitmaps through it, you will often have to cut back to 
optimise for the Web. Flashis, however, extremely 
processor intensive, and most of the ‘reining in’ lately 
has had to do with that: playback/performance issues, 
particularly on the Macintosh. Playback on even the 
fastest Macs is pitiful compared to the PC. Often we 
will develop something compelling, then have to scale 
back to accommodate the Macs.” 

The company has also worked ona number of 
broadband-based projects, including the Mummy 
presentation for Discovery (see boxout The Mummy 
Returns). The extra bandwidth naturally means it’s 
possible for the designers to utilise larger graphics 
files, and more audio (including extensive narration) 
that’s also of a higher quality. But even there are 
technical limitations. 

“We still have the same problems with 
accommodating different processor speeds on the 
client side. It’s kind of like making a sandwich: with a 
broadband site you can add cheese, better bread, 
pickles and peppers, but the meat on both still has to 
be chewable.” Ea 
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2. 2020 Green.com was created for the Aetna Foundation. An educational Website for 
teenagers, it uses animated interactive tools to recreate real-life financial situations. 
“Our goal for the site was to bring to life a dry subject matter, while avoiding a gaming 
environment that might feel less authoritive,” says Brad Johnson. 


3. Created for Kodak, the Peregrine Falcon: Birdcam site (www.kodak.com/go/ 
birdcam) is both a visually sumptuous interactive encyclopedia and live Webcam, 
following the fortunes of a pergrine family of birds atop the Rochester skyscraper in 
New York. 


4. Living Memory: A Tribute to Martin Luther King (www.kodak.com/go/ 
martinLuther) is one of several Second Story sites to combine traditional Web design 
with Flash as appropriate. 


5. Second Story’s ability to tailor all elements of presentation, from the navigations 
system to the typography, use of music and reliance on animation to suit each project 


The Mummy Returns... 


An example of Second Story’s Flash-based work can be found at 
the broadband Discovery Website Unwrapped: The Mysterious 
World Of Mummies at www.discovery.com/highspeed/tlc/ 
mummies/index.html. An interactive look at the stories of 20 
naturally preserved mummies from around the globe, it uses 
Flash to tightly integrate video, ambient music, narration, and 
photo stills. Brad Johnson explains how and why Flash was used: 
“We used Flash to create animation sequences from still 


photographic assets using traditional documentary film 


is highly impressive. This Website documenting two key figures in the Women’s 
Movement (www.pbs.org/stantonanthony/) is a case in point. 
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techniques, which really pushed the programming to the next 
level because we were doing this with bitmaps instead of just 
vectors. In doing this, we could transform static images into 
animated sequences that let the story unfold in a more 
cinematic way. 

“Given the number of assets that needed to be organised and 
structured in the site, Flash allowed us to attach and assign these 
assets as objects that could be shared throughout all fla files. 


“We had numerous external assets (audio, photos, animations) 


waking from Central othe UN, kept citing 


that had to be pulled out and dynamically loaded. With Flash, 
the development of such a complex site was much easier 
because of the robust scripting and capacity to utilise 
Smartclips and shared Libraries. Because the site is 
composed of so many shared elements, using shared Libraries 
was extremely efficient because these elements could be 
drawn from a single file. This made for faster downloading, 
because only a single file had to be downloaded. It was also 


much easier to update in that you only had to modify one file.” 


1] “Flash allowed us to implement 
interactivity so that users could 
control the story. We created a 
‘controller’ that lets users watch the 
story unfold, replay any sequence, 
pause a sequence to read the text, pan 
the image, hear audio commentary, or 
watch streaming RealVideo.” 


B “In the 3D Egyptian tomb, Flash let 
us transform 3D renderings to 
simulate a world that users can explore. 
In the 3D environments, we were able to 
create a more convincing sensation of 
moving around the tomb by tweening 
the transitions to create smooth and 
fluid motion." 


a “At one level of the tomb, custom 
cursors let users pause and call up 
information with rollovers embedded in 
tomb artefacts. At another level of the 
tomb, the custom cursor let us simulate a 
flashlight or torch to boost realism.” 


“Two of the tomb's levels let users 

unwrap or make a mummy. The 
controller for this section has added 
functionality, letting users drag it to view and 
review every moment of the process. At 
various stages of the process, users can roll 
over ‘hot spots’ on the mummy as they occur 
to call up additional caption information.” 


arts 
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3D Flash animations 


in Vecta 3D 


Create stunning 3D Flash interfaces with the 
creative use of simple objects 


here are two main tools which 
can quickly and easily create 
low-bandwidth 3D animations 
for use in Flash: Swift 3D and 
Vecta 3D. Whereas /llustrator can extrude 
and use various plug-ins to create 3D, good 
results tend to be laborious to produce, and 
small file sizes are hard to come by. Swift 3D 
has far and away the best Gradient Shader, 
but the downside is that file sizes are greater, 
which isn't what Flash is all about. 

Vecta 3D, on the other hand, makes great 
flat colour or wireframe 3D Flash files with 


much lower file sizes. Be warned though, this 
isn't a tutorial for beginners: you will need to 
know basic Flash concepts and the names 
and uses of the general tools, as well as the 
way buttons and movie clips work. 

We're using the Vecta 3D standalone 
software tool. Although the plug-in for 3ds 
maxis fantastic, the chances are you won't 
have it. To familiarise you with the software, 
there's an interactive V3D demo on the cover 
CD and you will also find all the necessary 
.swf files on the cover CD as well as the 3ds 
max files needed to import into V3D. 


Part 1: Creating the Vecta 3D elements 


We're going to set up a 3D perspective on a wireframe 
model and rotate it around an anchor point 


V3D standalone 


The V3D standalone can 
import .3ds, .Al and .EPS files, 
so you don't need a copy of 3ds 


aa os 


max to start whizzing up your 
Flash-based Websites. You 

can extrude .Al’s and .EPS files 
within /llustrator or Freehand, or 
within V3D. 


Gradient Shader 


The standalone Vecta 3D 
product has a separate program 
called the Gradient Shader. With 


this, you can import textured .3ds 
files and the Gradient Shader will 


Copy all of the CD-ROM files from the cover 

CD to a convenient location on your hard 
drive. Start up V3D, click File>Open. If you wanted 
to use one of your own .EPS or .ai (///ustrator) files, 
you can use the Import function 


take care of colour perspective, 


depth and tone. Navigate to where you stored the .3ds files on 


your hard drive, and open it. You should see 
the box model we will be using to create an 
interactive 3D Flash interface. 


No wireframe appears on the screen, but you 

can now do a mini preview render, and see a 
proper wireframe model rendered as it will appear in 
the Flash .swf file we're importing to Flash. Doa 
practice rendering in the other two rendering 
modes. Preview render with Control+P, from the 
Render menu or the camera button on the console. 


4 | All is not well: we seem to have a flat grey blob 
on the screen. This is because we are in Flat 
Render mode. We are going to use the Default 
Render mode, flat colour with edge lines. There are 
two others, ‘wireframe’ and ‘flat blob’. Click on the 
‘wireframe’ button (circled) and the scene will make 
a little more sense. 


Set the animation to 60 frames, there is an 

input box on the console. Alternatively, the 
finished .swf file is on the cover CD. To create the 
animation, click 180 in the Y input and -90 in the Z 
input box. Save the animation as ‘phase1.swf'. You 
actually see what is exported only when saving the 
file, so when you export, check out the output file. 


Now to create the animation. First, doa 

test render, then select Modify Centre, 
because you want the box to rotate around a point 
that isn't the default centre point. Click the Modify 
Centre button, move the model down and to the 
left, this is modifying the ‘anchor’ point the model 
will rotate or scale around. 


We are going to use an isometric model - 

which always works well on 2D monitors and 
TV screens. This means we will need to rotate the 
model 30 degrees. The Rotate tool is selected by 
default. Click on screen and rotate the model. 


Now we need to set up the correct 3D 

perspective. There isn't a specific tool in V3D 
for setting up angles for the start model, although 
there are specific input values for animating that 
model. You can choose now to practice rotating the 
model to roughly the correct isometric view, 30 
degrees. Or open the ‘freaky_flat_box_correct_ 
perspective_1.3ds', and lower the Perspective Rate 
to 0, so that no perspective modification occurs. 


9 | Import the ‘Freaky_flat_box_correct_ 
perspective_2.3ds' and make animations with 
the following X, Y and axis settings. You don't need 
to change the anchor point on the new model, it will 
use the default. Model 2 should be X = 90 Y = 45Z 
= 90. If the maths behind rotating these hurts your 
head, try some different effects by manipulating 
these values. > 


Flash Special 


Part 2: Creating the Flash interface 
Moving the symbol along a basic timeline animation 


Scrolling box effect 


There are plenty of ways to 

con Flash into producing 3D 
images - the scrolling box 

effect on www.bigimpact.co.uk is 
made by scaling the bottom text 
layer from 0 to 100 per cent while 
the top layer is scaled from 100 
per cent to 0. 


We are using Flash 5, but the same concepts Import the .swf file we have created, and use 
apply to Flash 4 users. Open Flash, set the the file copied from the CD called ‘0 180 

standard frame rate to 25 frames per second. Create — minus 90.swf'. Now select the first frame and copy Delete all frames after frame 34, select frame 

anew movie symbol called ‘phase 1 over’. frame 1, with Ctrl+Alt+C (Command+Alt+C). 34, right-click the frame and select Actions. 


HRUMRARGRSRANRARLERATARANORY 


- - Go Insert blank keyframes in the three remaining 
Drag the Stop action to the right-hand side of positions. You can do this by pressing the 
the Actions region. Your screen should look In the first frame, paste the frame we just shortcut, F6, or you can right-click the blank frame 
like the screenshot. copied. Press Ctrl+l to open the Asset Library. and select the option from the menu. 


In the ‘over’ frame, drag the movie from the 
Asset Library that we just created. Edit the 
movie symbol, select the last frame and copy the 


9 | Enter the main movie and paste the copied 
frame, as in the screenshot. Create a new layer 


and select the Type tool, type ‘CD rack’ using the 
frame. Then paste this frame in the ‘down’ position. 8 | Now go back to the movie symbol created Font Impact, point size 36. Skew and rotate to fit 


Copy the ‘up’ frame to the hit frame. earlier, select and copy the first frame. like the screenshot. > 
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Part 3: Building up the animation 


The first step is to create a five-layered 3D action using the Information palette to line the buttons up... 


Other tutorials 


If you don't think your level of 
Flash skills are up to handling 
this tutorial, check out the 

other great tutorials in this mag, 
or visit http://dynamic. 
macromedia.com/bin/MM/soft 
ware/trial/hwswrec.jsp?product 
=flash_training, which is a free 
online training resource from the 
creators of Flash. 


Adding actions 


The main differences between 
Flash 4 and Flash 5 are the 
way you add actions. In Flash 4 
you will need to double-click 
a button you have created and 
then double-click the action 
you require. 


Now create five more layers, but move them 

underneath the text layer and the CD Rack lid. 
Name all of your layers: the bottom five should be 
Button 1, 2, 3, 4 and 5 respectively. 


Create a Text layer, write Loop 1 through 5 

and have lines pointing to the ‘cases’. This is 
the first step: we now need the second .swf we 
created to fold upwards. 


Drag the ‘gotoAndPlay’ action to the 
right of the Actions dialog box. Select 
the button’ frame. All other options should remain 


as their default settings. 


Now drag the button we have created from 

the Library, then position one on each layer Have a quick preview - when you rollover the 
and line them up, accurately. The Information ‘cases’ you should find that the animation runs 
palette is particularly useful here. with a swish, twisting 3D action. 


Create a new top layer, add a Stop action and 

drag the Stop action to the end of the 30th 
frame. Go to Windows>Panels>Scene so the Scene 
palette appears. Duplicate the scene five times and 
name the scenes according to preference. We've 
chosen ‘button 1 —5'. Stay on the Start scene. Lock 
all layers apart from button 1. 


Right-click on the button 1, (the actual button, 
not the button 1 frame), and select Actions. 


9 | On button 5, create a motion tween (quick 
access by right-clicking). Then add a keyframe 
to frame 12. Move the ‘Loop text’ layer to the 
bottom of the stack: ‘shift+{‘ will do this quickly. 


8 | In the Scene palette, click on the button 1 
Tween the bottom button to fall off the bottom of 


scene. Add 30 frames for all items in the 
timeline. Unlock the button frames. the screen. > 
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Part 4: Completing the interface 


This is where the tweening gets complicated — we'll attach 
another movie on to the first using an imported .swf file 


JavaScript addition 


There are less actions available 
in Flash 4 because version 4 had 
ActionScript bolted on to the 
product at the last minute, 

Flash Shas had real JavaScript 
added as part of the product's 
core functionality. 


cil 
Trim the over-hanging frames and copy the 
first frame of each button's tween, and paste it 
at the start of its layer in the timeline. This will 
remove the ‘disappearing button’ effect we 
presently have at the start of each button layer in 
the timeline. Make sure the Stop action in the top 
layer is dragged to the 30th frame. 


Do exactly the same for buttons 4, 3 and 2. 
Then slide their tweened bars four frames 
along, the next four further than the last, so the 
buttons drop off the stack in a sequence. To improve 
the effect, use the Ease Out option in the Tween 
palette. This will make the action mimic gravity. 


yy insert a keyframe in button 1's layer in frame 
24. Now create a tween and move the static 
button near the middle of the screen. Add another 
15 frames to the button 1 and the text layers. They 
aren't needed on the previously tweened button 
frames. Drag the Stop action to frame 45. 


Create a new layer above the button 1 layer. 

Create a new movie, call it phase 2, import the 
other .swf file we created earlier, ‘90 45 90.swf'. 
Add a Stop action to the last keyframe. 


8 | Drag the button to the bottom-right of the 
button scene on a new layer. Click on the 
button and right-click to add an action. Drag the 
‘gotoAndPlay’ action, and select the first scene. You 
can skew some text as Content to Fade in over the 
state, and add an MP3 loop from your archives to a 
new keyframe at frame 45 on a new layer. On the 
back button, add a Stop All Sounds action. 


Create a new button symbol and call it ‘back 
button’. Type in BACK in big text, colour the 
‘over’ state to red, down to blue and draw a black 
box over the whole BACK text in the hit region. 
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—_ 
Delete button 1. Edit the rotating button, 
select the last frame and copy it. Create a new 
layer in the scene, paste the frame into it and make 
sure that it lines up correctly with the final frame of 
the button ‘over’ state. By the way — looking at the 
Info palette information for the final frame and 
typing in this information when you have pasted the 
frame won't work: you must use trial and error. 
Sorry! A few movie tests should have things 
positioned correctly. 


Add the new movie to the button 1 scene, 
using the last frame of the static button tween 
to position the movie in the correct place. Drag the 
movie we have just created one frame further along 
the timeline, and the final tween one frame back. 
Your screen should now look like this. 


[9 | You now have a fully working 3D interface 
that animates, jumps to different scenes 
and back to the initial menu, and even plays a loop. 
You will need to repeat the steps for the other 
buttons to complete the site. It's a complex 
procedure, but it has more depth than a lot of sites 
you may have put together in Flash before. If you 
made it this far, well done! 
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40 tips for 
ActionScript 


Whatever your level, there's something here for everyone, 


from the basics to really advanced stuff... 


ou don't need to be a code 
wizard to get some serious 
| if kick out of ActionScript in 

| Flash 5. Should you feel so 
inclined, you can even build your own 
applications entirely within Flash, for 
streaming over the Net. Whatever your 
level, there’s something here for you... 


Beginners 


1. What does ActionScript do? 
Without ActionScript, a Flash movie 
simply plays from beginning to end like 


any other movie. But ActionScript 
enables you to make it stop and start, 
respond to user interaction, jump 
frames, interact with external files, and 
dynamically change its own content. 


2. How do you use it? 

ActionScript is like JavaScript, and is 
written into Flash’s Actions window. 
This has a friendly menu system where 
you can choose the actions, and Flash 
will write the code. There are two main 
ways to use it: on a frame, or on a button. 


Illustration: Paul Price [e] p@ulprice.com [t] 020 7237 7652 


3. Frame actions 

Add ActionScript to a frame to make 
the actions happen when the movie 
reaches that point. Select the frame and 
open the Actions window, then choose 
the required action - a Basic 
Actions>Stop action, for instance, will 
make the movie stop and wait as soon 
as it reaches that point. 


4. Button actions 
Add ActionScript to a button so that the 
action happens when the viewer 
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Creating buttons in Flash is quick and easy - you just turn your graphic into a Button symbol (hit F8), 
and then add actions to it in your Actions palette. Flash automatically attaches this to an on(release) 


user event, which you can change yourself. 


interacts with it - by clicking it, for 
instance. First, turn a graphic into a 
Button symbol via the Insert menu, 
then add actions to it in the same 
way as with frames. For instance, you 
could give your button a Basic 
Actions>Play action. 


5. Events 

When you add an action to a button, 
you'll notice that two extra lines appear 
around it, so you have: 

on (event){ 


} 

This tells the Flash movie what type of 
user interaction will make the action 
happen. Select the on(...) line and set 
this to Roll Over, Release (which is the 
same as a Click), a key press, or 
something else. 


6. Goto... 

You won't always just want your 

Flash movie to stop or move when 
users click a button, you'll want it to 
change, like going to a different page. 
Unlike HTML, you don't have to create 
a new file for this. You can put it in the 
same movie at a later frame, and add 
a Basic Actions>Go To action to the 
button. Set the Frame box to the 
relevant frame number, and don't forget 
to check or uncheck the gotoAndPlay 
box, as appropriate. 


7. Links 

If you do want to create a hyperlink to 
another page, use the Basic 
Actions>Get URL action. Type the link 
address in the URL box, just as you 
would in Dreamweaver, for example, 
and the target in the Window box, 
which is useful for opening the link 
in a new window or a particular 
frame. The Variables box is used for 
server applications. 


8. Load Movie 

Get URL opens a file in the main 
browser window, however, and it may 
be that you just want to load a new 

file into the Flash window, keeping 

the HTML as it is. In which case, use 
the Basic Actions>Load Movie action. 
Give the address of the SWF file in 
the URL box. 


9. Levels 

You can have lots of Flash movies 
open at once in the same space, 
appearing on top of each other, or in 
Flash-speak, on different levels. 
This is especially useful if you are 
creating the whole site in Flash. It's 
probably easiest to put the main 
interface in a single file which is always 
there, and hold your sections in 
different files which load in and out 
when necessary. 


10. Level O 

Level 0 is the bottom level, which 
movies load into by default, so keep the 
interface there. Then when you use 
Load Movie to open a section, set the 
Level box to 1, so it appears on top. You 
can only have one movie per level, and 
opening a new movie on level 1 will 
replace the old one. 


Movie Clips and targets 


1. Using Movie Clips 

In Flash, you don’t always want to 

just stop and move between frames and 
movies - sometimes you want a 
particular part of the interface to 

hide, or move, or change in some 

other way on its own. To do this, turn 

a graphic into a Movie Clip symbol. 
Then double-click it to give it its 

own frames, animations and actions 
which all occur independently of the 
main movie. > 


Using the Load Movie action to open different 
movies on different levels, like layers, makes 
it easy to organise diverse interactive content 
within a single Flash Player window. In this 
splash screen, the interactive bubbles are ina 
separate file loaded over the top of the 
background animation. 


Four easy effects 


Simple tricks to impress yourself with... 


1. Preloader 

Preloading your movies is pretty much 
essential in Flash, and simple using 
ActionScript. The principle is to loop the 
movie from frame 1 back to frame 2 until 
the final frame is loaded. At frame 1, add a 
basic Actions>If Frame Is Loaded action, 
setting the frame to the last in your movie, 
and between the curly brackets add 
Basic Actions>Go To action, sending 

the movie to frame 3. Now at frame 2 just 
add a Go To action, looping the movie 
back to frame 1. 


2. Cursor tracker 

It's popular to have a graphic that follows 
the mouse around the screen, and you can 
develop this further to create some pretty 
cool effects. Create a Movie Clip graphic 
and give it a name in the Instance palette. 


Then on frame 1 of your movie add an 
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In this dynamic Flash menu for 3D World's 
new site, a complex range of variables and if 
conditions combine to give the Editors 
complete flexibility over what appears in the 
menu, without having to edit the FLA file. As 
your code reaches this Level of complexity, it’s 
more important than ever to know your strings 
from your expressions, and to leave yourself 
plenty of comments as a reminder of what 
different lines do. 


Actions>startDrag action; set the target 
to your Movie Clip and click Lock to 
Mouse Center. 


3. Hide cursor 

Along with this, you might want to hide the 
normal mouse cursor. No problems: 
simply use the Objects>Mouse>Hide 
Command, or type in Mouse.hide();. 


4, Full-screen playback 

Nothing beats seeing a great design 
full-screen on your monitor, with no 
distracting menus, desktops and start 
bars. There's an action which sets the 
movie to full-screen playback, although 
be sure to put this on a button, and don't 
just slam your users into it. Using the 
Basic Actions>FSCommand action, set 
Full-screen to True in the dropdown. The 


code is fscommand (“fullscreen”, “true”);. 
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stop ; 
score = 0; 
damage = 0; 


It's quick and easy to load a new movie - you can do this from a frame or a button event, using 
the Actions>Load Movie action. In this game, the movie on level 0 is the main interface and 
introduction. The SWF file for the game itself is automatically loaded on level 1 as soon as 
the movie reaches frame 6. 
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2. Controlling clips 
Select the Movie Clip and give it an 
instance name in the Instance palette. 
You can now send it instructions with 
ActionScripts in your main movie, using 
the Basic Actions>Tell Target action. If 
you called the clip ‘bob’, you can add 
this script to a button which tells bob to 
go to its own frame 2 and wait there: 
on (release) { 

tellTarget (“bob”) { 

gotoAndStop (2); 

} 

} 


3. Targets 

The target means the Movie Clip 
instance you want to send instructions 
to. It’s possible to have Movie Clips 
within other Movie Clips - just give 
Flash the path to that clip as you would 
to hyperlink files within folders. To send 
instructions to a clip called ‘andy’, for 
instance, which is within ‘bob’, then give 
the target as bob/andy. 


4. Up a level 
You can also send instructions from one 
clip to another, but adjust the path 


Movie Clips are like miniature Flash movies 
within the movie proper, and you can use 
ActionScript to send them instructions to 
move, change colour, disappear and so on. In 
this 3D Flash game, the blue meteors’ are 
Movie Clips, and their motion and explosion 
properties are controlled in the timeline. 


accordingly. If there’s a clip called ‘bert’ 
in the main movie, and you want to send 
an instruction to ‘andy’ inside ‘bob’, set 
the path up a level first. Just as with 
files, you can use ../ to do this: 
../bob/andy. 


5. Relative and absolute 

These are called relative paths, 
because they trace the path from where 
the instruction is. But this can get 
complex. As with Web addresses, you 
can also use absolute targets, which 
follow the path from the root, which in 
Flash is the main timeline. Simply 
begin with a /. Then wherever the 
instruction is, /bob/andy always finds 
‘andy’ correctly. 


6. Targeting levels 
You can also target a Movie Clip ona 
different level - say if you want a global 
navigation button to tell an animation on 
level 1 to play. Simply begin the path 
with _ levell, or _level2, and so on. If 
‘bob’ is on level 1, tell ‘andy’ to play with 
a script like this: 
on (release) { 

tellTarget (“_level1/bob/andy") { 

play(); 

} 

} 


7. Dot syntax 

This all makes good sense, but because 
Flash 5 makes ActionScript more like 
JavaScript, it prefers what is called ‘dot 
syntax’ to the slash syntax we're using. 
In short, this means replacing / with a 
“.”. So it’s better to write 
_levell.bob.andy than 
_levell/bob/andy. To go up a level, 
write _ parent instead of ../, and for an 
absolute path, begin with _root instead 
of /. 


8. Dot syntax shortcuts 

You could type the dot syntax path into 
the Target box for the tellTarget action, 
but it’s complex for such a simple 
instruction, and Flash 5 offers a faster 
way. To make andy play, add this action: 


As the 3D game, all the corner blobs and lines 
in this cube are individual Movie Clips. Their 
properties are managed in the main timeline, 
which can ensure this sophisticated 3D Flash 
engine renders the 2D points seamlessly. 


on (release) { 
_level1.bob.andy.play(); 
} 


9. Variables in Movie Clips 

Variables are stored in the target where 
they are created. So if you set a variable 
myName="...” in both ‘bob’ and also in 
‘andy’, for instance, they won't interfere. 
If you want different Movie Clips to 
share variables, use target paths to say 
where they are. For instance, you can 
change the value of myName in‘andy’ 
from level 0 with 

_level1 .bob.andy.myName="new 
value”. 


10. The withO shortcut 
If you’re sending a lot of instructions to 
‘andy’, though, you can speed things up 
using with(, which is much like 
tellTarget, but a preferred syntax from 
Flash 5: 
with(_level1 .bob.andy){ 
myName="Funkmaster Jones” 
myAge="64" 
play() 
} 


Properties and variables 
1. What's a property? 

Movie Clips have properties which can 
be controlled dynamically using 
ActionScript, including x position, y 
position, transparency, and so on. You 
may want a graphic to shift 10 pixels to 
the left or right whenever your user 
clicks a left or right button — you could 
do this with frames, but not infinitely: 
ActionScripts offer more control. 


2. Setting a property 

It’s easy to change a property of a 
Movie Clip using the Actions> 
setProperty action. Choose the 
property - _x for x position, say - and 
type in the target path for the Movie 
Clip, in either dot or slash syntax. In the 
Value field, type what you want the 
property to change to. 


3. Getting a property 

Of course, though, if you want to shift a 
clip 10 pixels to the right, you need to 
find out where it is first, then add 10 to 
this, and set this as the Value. Use the 
Functions>getProperty action to find 
out what a property is, then type in the 
target path (in quotes), and the property 
name (_x, also in quotes), and add 10. 
So you've got: 

getProperty ( “bob.andy", “_x" ) + 
10 


4, Expressions 
But if you just type this into the 
setProperty value box, you'll find it 


doesn't work, because Flash is trying to 
understand how “getProperty ( 
“bob.andy”, “_x” )+10” can be a value. 
Of course it isn't - it needs to doa 
calculation to get the value. That is to 
say, it’s an expression, and you need to 
check the Expression box by the value 
of the setProperty. 


5. Strings vs expressions 

In simple terms, a string is a series of 
characters, like “hi” or “22”, whereas an 
expression is a number, calculation or 
‘something to do’, like 22 + 22 or 
getProperty ( “bob.andy”, “_x” ), whose 
result could be either a string or an 
expression. Put another way, strings 
belong in quote marks and expressions 
don't. Or to put it another way, when you 
add strings, like “5"+"1", Flash comes up 
with “51”. If expressions are added 
together, providing it’s logical, Flash 
interprets this as maths, as in the case 
of getProperty ( “bob.andy”, “_x”)+10. 


6. Using variables 

Flash is good at figuring out your strings 
and expressions, but you do need to be 
clear. The best way to organise code is 
to use actions. For example, when 
moving a clip 10 pixels to the right, use 
the variable newXPos: 

newXPos = getProperty ( “bob.andy", 
0 iene 10; 

setProperty (“bob.andy", _x, 
newXPos); 


7. Setting a variable 

Use the Actions>set variable action to 
set a variable. Type its name into the 
Variable box - newXPos, say - and its 
value into the Value box. Remember to 


Changing the property of a Movie Clip is 
simple. Just add an Actions>setProperty 
action to a button or frame. A dropdown 
appears where you can choose which property 
to change, spaces for selecting the movie you 
want to talk to and the final outcome. 


check the Expression boxes if 
appropriate - your value will often be an 
expression, but rarely the variable 
name. Most of the time it’s easier to just 
type ina variable, in Expert mode: 
myName=" Nick" 


8. Shorthand for properties 

It gets easier if you do all this in Expert 
mode, and you can use the preferred 
shorthand for dealing with properties. 
For instance xPos=_x simply xPos to to 
the x position of the Movie Clip that 
holds the action. In the same way that 
variables can be targeted using dot 
syntax, you can also target properties, 
both for setting and getting. So this will 
also move ‘andy’ 10 pixels to the right: 
bob.andy._x = bob.andy._x + 10 


9. Checking a value 

What if you only want to move the 
Movie Clip ‘andy’ to the right if it isn’t 
past the edge of the main movie? Check 
conditions using the if (...) action. 
Everything that happens when the if (...) 


Workflow and testing 


Quick ways to spot and iron out mistakes as you go... 


1. Comments 
With all this, especially if you’re making a 
large movie, you can get in quite a muddle 


unless you Leave plenty of messages for 


into the window. Use Check Syntax to make 
sure you're getting things right. In 
Preferences, you can also set this as the 


default scripting mode. 


yourself explaining what the different bits are. 
No problem there: use the Actions>Comment 
action, where you can type anything you want 


and the code won't be affected. 


2. Expert mode 

You may be surprised to know that you'll 
quickly pick up ActionScript and want to write 
the code yourself, which is much quicker than 
using the menus. Choose Expert mode from 
the right-corner dropdown, and type directly 


3. Testing 
Test your movie every few lines, to check 


you're on the right track. Just hit 


Control+Enter. An Output box will show any 


glaring errors you've made, otherwise if things 
don't work, choose Debug>List Objects, which 
shows the paths to all your target clips, so you 
can check these are right; and Debug>List 
Variables, which shows paths and values for 


all your variables. 


In this movie, the number and motion of the bubbles as you sweep into a fish's mouth are 
randomised under the control of a number of variables. These draw on Flash's in-built maths 
tools, and then send instructions to Movie Clips to either propagate or burst. 


bit is true goes between curly brackets. 

if ( bob.andy._x < _root._width) { 
bob.andy._x = bob.andy._x + 10 

} 


10. Different types of check 

You can use all the usual ‘operators’ in 
your ‘if’ condition, including <, >, <=, 
>=. If you want to use equals, however, 
you must use ==, for example, if (xPos 
== 3) or if (myname == “nick” ). You 
can also check for not-equals, using !=, 
as in if (myname != “nick” ). If you want 
to check several conditions, use && 


meaning “and”, and || to mean “or”, as in: 


if( myName=="nick" II 

myName=="harvey” ) { 
trace("Hello “ + myName ) 

} 

... which only says hello if you're called 

Nick or Harvey. GEES 


4. TraceQ) 

If you're still having trouble, use the 
Actions>Trace action. In the message box, 
type something like “hi” - when you test 
the movie, your message should appear 

in the Output window, showing the code 
has reached that point. If not, you know 
the mistake came earlier. You can also 

set it to an expression and put ina variable 
name, to find out the value of a variable at 


that point. 


5. Debugger 
Still no joy? Sounds a bit rude, but try the 
Debugger. Choose Control>Debug Movie, 


and Flash will test the movie in Debug mode, 
with the Debugger window open. Here, you 
can switch between the tabs and different 
frames to see what all the Movie Clips, 


objects, properties, variables and so on, are. 


6. Proofs of concept 

As a final resort - and no doubt you'll often 
reach the point where you cannot get your 
code to work, no matter what - create a 
proof-of-concept movie, containing only the 
code necessary to achieve the specific effect 
you're having trouble with. Get it to work in 

a simple environment, then transfer this into 


the movie proper. 


Flash Special 


Expertise provided by Alastair Jennings 
{e] computerartsuk@yahoo.co.uk 


You'lLfind the tutorial files on the CD. in 
the Director folder, as well as a 30-day 
demo version of the Director 8. 
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Shockwave 
with MP3 


Create an interactive showcase using Shockwave 
to promote your band through the Internet 


P3 has enabled many bands 
to express themselves 
creatively on the Net, 
providing fans with a regular 


( 


{! 
if 
fix and massively increasing potential 
audiences. In this tutorial, we create a 
Website for underground punk rock band 
Annalise as a way for fans to listen to new 
tracks even when the band isn't touring. 
There’s also the option to download any 


particular track (they'll be stored 
externally to save on file sizes) toa 
Shockwave movie as an SWA. 

Director and Photoshop are used to 
build the interface, after the graphics are 
optimised for the Web. Then we'll set up 
some sliding menus, using a movie script 
to control the buttons. Lastly, we'll type in 
some links to alter the image depending 
on which track is downloaded. 


Part 1: Music compression 


MP3 has become a standard for compressing music over the Internet, and there are 
plenty of free programs that will convert your CD audio into the relevant format 


External links 


By linking the tracks to the movie 
externally you can dramatically 
cut down the final file size 
needed for the Web. Try to get the 
basic movie size down by 
compressing images or even 
reducing stage size. 


rt | All you have to do to get programs such as 
RealJukebox (downloadable from 
www.real.com/jukebox) or MusicMatch Jukebox 
(www.musicmatch.com/download/free) to 
compress your tracks is put your CD in the drive and 
click Record. For this project you want two 
compressions: low quality for use on the Net and 
high quality for downloading. 


The second, Windows Media, is again all 

formats but isn’t so widely used or supported. 
It actually has a better compression rate than MP3, 
at about 750KB for a minute of sound at CD quality. 


In your MP3 program, specify your own 

compression ratio for low compression. 
At about 64Kbps which is a 22:1 compression, 
you'll get a minute of music for 400KB. Any 
compression under 24Kbps will automatically 
convert the file to mono. 


Windows 
Media 


The idea of this site is to create a Web page 

where people can listen to tracks across the 
Net without being able to download them at a low 
quality, but with the choice of downloading the 
higher quality version instead. 


Third is Shockwave Audio, used in Flash 

animation and multimedia. Its compression is 
similar to that of MP3. To create Shockwave Audio, 
you need Macromedia SoundEdit 16 or Bias Peak 
2.0 for the Mac or the Shockwave Xtra Converter 
for Director. 


Track 05. mp3 Propertie 


For audio that’s destined for the Web, we're 
going to take the file right down to 16Kbps 
which will be converted to mono, and a file size 
under 400KB. Although the sound quality isn't 
great, it's still acceptable for the Web at this stage. 


Windows 
Media 


For this project, we could use three types of 

sound compression. The first is MP3 which is 
supported by all formats. Because of its widespread 
use, it's easy to find freeware programs that format 
into this file type. 


G We're going to use MP3 compression and 
connect the files to a Shockwave movie as an 
SWA so that they can be linked into and play 
through the movie when online. 


Track 03. mp3 Propertie 


9 | Better quality files can be compressed at 
128Kbps which is a ratio of 11:1 and gives 
CD-comparable sound quality. Alternatively, you 
can take the size down slightly to 96Kbps which is 
15:1 compression and still sounds reasonable. 
Different types of music fare better at the lower 
compression rates. > 
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Part 2: Building the interface 


Creating a background for your page is an important factor 
in getting the right results 


HTML Web page 


By producing a series of 
smaller Shockwave movies 
embedded within an HTML 
Web page, you can produce 
viewable content while the 
Shockwave content loads. 


Before starting a project, it's important to set 
up a good base for the interface so that once 
you're in Director, you can simply slot in your text 


ee Open the file background.psd in Photoshop or 
and imported files. 


an application that supports .psd format files. 


5 | Save the graphic as a .psd file and check that 
it's at 72dpi. If you select one of the 
background layers, select all and copy, then go to 


4 | When working in this way, it’s good to have 


both Director and Photoshop open. drop the graphics from one app to the other. 


8 | When the window appears, you'll see the 
graphic is formatted as a JPEG with a quality 
of 60 per cent. By playing with these settings with 
an original file, you should be able to get the size 
down without affecting the image quality too much. 


At the bottom you will see an Optimize in 
Fireworks button — click this to launch 

Fireworks optimisation. This may take a while 

depending on the speed of your machine. 
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Director, open the Paint window and paste. You can 
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In this case, the background is built from three 
| 3 | simple layers: two for the background, and one 
that acts as a guide for the photographs to sit in. 
The split background can be made to animate in 
Director, if required. 


G The new graphic isn't optimised for Web use. 


Open the file index.dir, and click on one of the 
background images, then choose the Bitmap palette 
in the Property Inspector. 


9 | Once the two background layers are placed on 
the stage in Director, you will need to make 

the sprite backgrounds transparent, otherwise you'll 
have a large white square covering half your image. 


Part 3: Sliding menus 


Shockwave enables you to create attractive menu systems. 
Open index.dir for this section to check on stages 


Return to sender 


Before starting this type of 
project, check that you know the 
addresses of the pages that you 
are building because all Links will 
be relative to the final positions 
of the movies. 


@ Open the file sliders.psd in Photoshop. This file 
is simply a construction of the buttons for this 
movie. Flatten this image and copy it into Director. 
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[Dl Sprite 2: (41 68,257 204) Copy, 100% 
& 


To make these buttons slide out and then 

retract when the mouse is over them, we need 
to constrain their movement. Draw a rectangle in 
front of the buttons, checking that it's in channel 2. 
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Next we have to set a few parameters: ‘ — set 
h =0— the stage width, put 100 into 

stageWidth —', and the speed of the sprite 

movement: ‘set speed = (h-(stageWidth/2))/2’. 


al Copy and paste this image into three paint cast 
members, then delete the two unwanted 
buttons from each screen using the Block Paint tool. 
Open Movie Index to see. 


To control the movement of the buttons, we 

need a movie script. First, we have to direct the 
movie to this script. In the score script at frame one, 
type in ‘on mouseup — go to the frame — scrollon’. 
This tells the play head to look for the scrollon script. 
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This next part controls the direction of the 

sprite from the original position: ‘— put the 
locH of sprite 5 into xpos —-' and the direction of 
the movement: ‘put (xpos-speed) into xpos — set 
the locH of sprite 5 to xpos’. 


9 | This script is easier to understand when it's 


go Select the three slider cast members and drag 
them on to the stage. Because you have cut 
them in this way, they should keep their original 
positions in relation to each other. Check that they 
are in channels 5, 6 and 7 in the score. 
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G The scrollon script controls the button sprites. 
Open the script window, Window>Script. 
Open the script scrollon in the index movie to see 
the script in full. The ‘— on scrollon’ says that this is 
the script to use, and ‘— if rollover(5) then —' 
basically instructs the movie: “If this sprite is rolled 
over, then look at this bit of the script...” 
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viewed in the movie: you will see that the put 
(xpos-speed) is used to change the direction of the 
sprite when it retracts. The final bit of this code is ‘— 
set the constraint of sprite 5 to 2 — ‘ which 
constrains the movement of the relevant sprite. This 
script is then repeated for each of the buttons. > 
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Part 4: Connecting the MP3 files 


We want to connect the MP3 files to the movie so that people can 
listen to them over the Net 


Off limits 


When using music within your 
Web pages, make sure you have 
full permission to use the tracks 
from all parties involved: 
remember that most popular 
music will be off limit. These 
songs are released by PIGDOG 
records, PO BOX 42, Hull 
HUIIAA and are for use with this 
tutorial only. 


Flash Special 


ae 
F080, 2001, 16 ww 


Fob 10,2001, 319 pw 


1 | This movie is going on to the Internet, so 
you have to keep the file sizes as small as 
possible. For this reason, importing the sounds 
into Director isn't the best option, so we'll link out We're going to link to the smaller of the MP3 
to the external files instead. files we compressed earlier in section 1. 


Tit Modify Contro 


Keyframe NK 
Remove Keyframe 


Frames... O#] 
Remove Frame %[ 


Media Element 
Control 


5 | Although we're using MP3 and not SWA, 
Director will treat it in the same way. 
Simply drag the SWA icon for each track to a 
relevant part in the score — this will pick up the 
sound file from the URL. 


4 | To link to the external files, go to Insert>Media 
Element>Shockwave Audio. A dialog box will 
appear which requires a URL for the file. When you 
hit OK, a SWA icon will appear in the cast. 
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In the score, double-click the tempo button 
to set the amount of time that the track 

plays for. Select cue point until you get to channel 1 

where the SWA member sits, then cue point 8 | You won't be able to preview this until it’s 

next. This stops the track playing when the uploaded to your Website. The movie works 

next track is selected. by linking to the external file on your site. 


— 
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Open the file tracks.dir. You will see that it has 

the same basic structure as the first movie. 
There is a track listing that people will click on to 
hear the tracks. These buttons will move the 
playhead across to each section. 


6 | One thing you'll notice is that the file doesn't 
g0 into the sound score and is recognised as a 
normal member: this means that you could put in as 
many tracks as you like. 


Duration: 0:02:48.111 | 

Sample Rate: 22.050 kHz te 
Bit Depth: 16 bits | 
Channels: mono | : { 


g It is also possible to use the MP3s as internal 


members in the cast, which is fine when 
working offline, but as it stands, the file size is too 
large to consider for the Net. 


Part 5: Downloading files through Director 


We want to connect the MP3 files to the movie so that 
people can listen to them over the Net 


Publish and 
be damned 


For large Shockwave movies, you 
can opt for a Shockwave game to 
play while the rest of the movie 
loads. This option is available in 
the Publish settings. 


| Set the visible of sprite 11 to true 

Set the visible of sprite 12 to false 

Set the visible of sprite 13 to foise 

Sat the visibie of sprite 14 to false 

Set the visible SEN 18 to false 
| @eTotetPage "https: ved demon 06 uk /apd /‘Track@2 .mp3" 
| end 


This is incredibly simple: just link into the | 2 | Open the movie track2.dir. As with tracks.dir, 

file in the same way that you would use you have a track listing, this time with each On each click we have this command which is 
lingo or the Behaviours library to connect to the button we use the code — gotonetpage similar to a normal HTML site. The file should 
next page of your site. ‘http://www.v-42.demon.co.uk/track02.mp3'. download directly to the user's hard drive. 


Part 6: Changing images 
Setting up links from the buttons to different images so that they 
change automatically when tracks are downloaded 
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Full steam ahead 
If you want to use steaming 
video, first check that your 
server has the appropriate 
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streaming software and the 
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movie format that it needs. 
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ge This can also be applied for other files such as For each track selected, we'll show a 
video and large image files, although you'll different image of the band, and for this 
have to set up streaming software on your server to we'll write a script that changes the visibility of the @ Place the images you wish to use in the score. 
get it to work with stream video. sprites in the score. In this movie, channels 11 to 15. 
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G Apply this to each link. For the image that 
We need to assign a behaviour to each button 8 | Under www.v-42.demon.co.uk/ track02.mp3 you want to be visible, simply change the 

that tells the movie to download the track and type in: ‘— Set the visible of sprite 11 to false code to: ‘— Set the visible of sprite 11 to true —'. 
change the image. Click one of the links and open — ‘then go to a new line and do the same for all of This now means that sprite 11 will become visible 
up the behaviour through the cast. the other images. when the link is clicked. FEE) 
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Illustration: Magic Torch [t] 01273 202147 [w] www.magictorch.com 


Flash tips 


Buried beneath the bells and whistles 
are Flash features that you'd probably 
forgotten all about. We go back to 
basics and give Flash the best 
workflow work-out it's ever had 


hether you’re a newcomer 
to Flash or peering down at 
everyone else from the top 
of the learning curve, there 
are always new tricks to discover. There 
are ways to use the new drawing tools 
that are barely documented, workflow 
tips that can only come from hours of 
experience and shortcuts that even the 
pro’s may not have heard of. 

When learning how to use something 
as convoluted as the multi-purpose 
Flash interface, it’s easy to skim over 
the surface and only use those features 
that give you the results you require. 


There’s nothing wrong in this — even 
the experts find it difficult to learn what 
each and every little panel and dialog is 
capable of. Most of the 30 tips here 
take you back to the basics of the 
program, but they’ve been chosen 
because these are the easiest areas to 
overlook. They are the features of 

Flash you either don't use as much as 
you should or that you would streamline 
if only you knew how... > 
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Naming layers as a matter of course helps you keep track of objects in complex movies. Try to plan 
the layer order of a movie in advance before even starting Flash. 
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Open as Library 

You can add Custom Libraries to Flash 
that appear in the Libraries menu or 
Common Libraries in Flash 5. For 
example, if you want an option that lets 
you access your own custom buttons, 
create a new Flash file and add all the 
buttons from other projects. Do this by 
opening each project systematically as 
a Library and dragging the symbols to 
the stage in the new document. When 
you’re done, save the file to the 
Libraries folder inside the Flash 
program folder. The next time you open 
Flash, the Custom Library will be 
available from the menu. You can 
continue adding to the Library by 
reopening the original file in Flash. 


Common Libraries 


Flash 5's Common Libraries are 
expanded versions of the Libraries that 
shipped with previous versions of Flash. 
Go to Window>Common Libraries and 
you'll find a range of ready-made 
objects, graphic symbols and sounds 
ready to drag and drop into your own 
movies. Among the most useful of these 
are the new Smartclips and Learning 
Interactions objects. These include 
ready-made ActionScripts that let you 
add dropdown menus, hot spots and 
other more complex actions. 


The Common Libraries folder contains several 
sets of prefabricated objects ready to drag 
and drop into your own movies. 


Movie Clip clutter 


Once you get used to using Movie Clips 
you’ ll find that the main animation 
timeline will be far less cluttered! 
Movie Clips enable you to control 
animation in a more organised way. 
This is even easier with the new 

Movie Explorer in Flash 5. Use the 
timeline to store timing actions (Stop 
and Go To commands, with Tell Target), 
while Movie Clips trigger act as 
Animation containers. 


Naming layers 


As you build up your Flash movie, give 
each new layer you create a descriptive 
and concise name. Modern Flash 
applications can end up with lots of 
different layers but properly naming 
them with the help of the Movie 
Explorer will cut down on the time you 
spend looking for specific objects or 
snippets of script. 


Label liberty 


Use a Label layer to add labels to key 
events in Movie Clips and in the main 
timeline even if you don't need to refer 
to them in ActionScript. It helps you 
keep track of what’s happening where, 
especially when you have to juggle 
several Movie Clips ina single movie. 
Also add a separate layer for any 
actions embedded in Movie Clips. 


Replacing Clips 


Using the Load Movie command doesn't 
just work for movies, it can be applied 
to Movie Clips too. You can use this 
knowledge to replace Movie Clips on 
the stage dynamically, by loading ina 
new SWF format clip from an external 
source in response to user actions or 
events in the timeline. 

Flash movies can have many levels 
and the same is true of Movie Clips. If 
you choose the default Level 0 to load 
the new clip, it'll replace the current 
content of that clip. Selecting Levels 1 
or above will leave the content of the 
clip in place and simply superimpose 
the new clip over the top. 

Although Flash unloads movies 
automatically from the targeted level, 
explicitly adding the Unload Movie 
command speeds the process along. 
You can also use the command to clear 
levels below or above where you've 
placed the new content. 


Flash clichés 


Flash has been around a while in Web 
terms. So long, in fact, that some of its 
tricks are getting a bit tired... 
*Zooming Text. Flash lets you zoom in 
and out of scenes at any level of 
magnification — that’s the power of 


} 

Ie 

| ste -resosseanallls” 
The Flash ‘Spotlight Effect’ featured in every 


Flash book on the market and now so common 
that it’s a bona fide cliché. 


vectors. The first time someone 
realised that you could do that with text 
it looked pretty good. The ‘wow’ factor 
wears off pretty quickly though. For 
more creative text effects, visit 
wwwelashkit.com/flashtyper/ 

* Spotlight Effects. Flash lets you create 
a layer mask so that you can show one 
small part of an image at a time. Lots of 
designers have used this to create 
‘spotlight’ effects where a search beam 
highlights bits of the image. 

‘Blue spheres. We don't know why, but 
blue spheres are all over the place. 
They’re easy to do: just make a circle, 
fill it with a light colour to dark colour 
Radial gradient and offset the central 
point. We've no idea why everyone 
makes them blue though... 

* Looping Animation. Just like animated 
GIFs before them, some people use 
Flashto create short animation 
sequences that loop forever and ever 
and ever... Try not to be one of them. 
After a while it can get on your nerves. 


The pointless splash screen 


Out of all the wonderful things that 
Shockwave Flash can be used for, the 
most popular must be creating 
introduction screens to Websites. If the 
splash screen downloads quickly and 
adds to the experience of using the site, 
then great. All too often though, Flash 
splash screens can be slow to arrive 
and when they do, they're often not 
worth the wait. Follow our splash 
screen rules to ensure you don't make 
the same mistake: 

«Keep the initial file size super 

small. You can use a ‘stub’ movie to 
load in background graphics quickly 
which then calls a second external 
movie if you have a lot of bitmap 
graphics or a soundtrack. 

* Make your splash screen useful. 
Incorporate navigation options beyond 
a button that simply takes you to the 
front page of the Website. 

* Give users a button to skip past the 
splash within seconds of connecting. 

- A popular way to let users know that a 
Flash movie is downloading is to loop 
an animation with the words ‘loading’ 
flashing on screen. Not knowing how 
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Shape Hints can make the transition 
between two shapes smoother. Using a third 
intermediary shape can improve animation 
quality further. 


long it’s going to take can also be very 
frustrating. A simple fix is to also 
include some text telling the user the 
size of the file with an estimated 
download time. 


Shape tweening 


When tweening from a regular shape to 
a more complex shape, such as a letter, 
try using Shape Hints. Even Flash pro's 
forget they're there sometimes. To use 
them, select the first keyframe in a 
shape tweened animation sequence, 
then go to Modify>Transform>Add 
Shape Hint. Move the Shape Hint to the 
point you want to mark. Go to the last 
keyframe and add a corresponding 

hint. Continue alternating between the 
first and the last frames as you add 
further hints. Shape Hints work best if 
they’re placed in the same logical order 
in both frames. 


Converting bitmaps 


Flash lets you combine bitmap and 
vector graphics within the same movie, 
but if eventual file sizes are a concern, 
you may want to reduce the number of 
bitmaps used. One way to do this is to 
convert more simple bitmap images to 


JPEG compression is best suited for 
photographic images. GIF is better for 
bitmaps with simple, continuous colour — but 
if you have a bitmap that can be rendered as a 
GIF you can almost certainly save more space 
by converting it to vectors. 


In addition to using Outline mode to view the 
outlines of objects colour coded to their layer, 
you can set Flash to display selection 
boundaries using the outline colour. 


vectors using Flash’s Trace Bitmap 
function. Select the bitmap you want to 
convert, then go to Modify>Trace 
Bitmap. Adjust the settings according to 
the result you want, remembering that 
the less complex the final vector 
conversion, the smaller the resulting file 
size will be. The Colour Threshold 
option sets the level that Flash will use 
to decide how to colour the vector 
tracing. Setting the Colour Threshold to 
10 means that Flash will treat two pixels 
with a RGB colour variance of 10 as 
though they were the same. You can 
enter a value between 1 and 500 — the 
higher the value, the smaller the file 
size. Curve Fit decides how smoothly 
the outlines of the shape will be 
preserved, while Corner Threshold 
does the same for sharp edges. 


Bitmap Fills 


You can use a bitmap as a fill, and paint 
with it just as you can paint with a 
gradient or solid colour. Import a 
bitmap into the current scene and 
select it. Go to Modify>Break Apart, 
then choose the Eyedropper tool and 
click on the bitmap. The current fill 
is changed to the selected bitmap. 
You can paint with the Brush tool 
using the Bitmap Fill, or draw shapes 
with the bitmap. 


Individual compression 


Flash lets you set general Compression 
Settings on export for bitmap images 
and sounds. This isn't necessarily the 
best way to get either the smallest 
possible file size or the best quality. You 
can tweak individual settings for bitmap 
objects within Flash by selecting the 
object in question in the Library, then 
choosing Properties from the Options 
menu in the corner of the panel. 
Bitmaps can saved in JPEG or 
PNG/GIF format. In the case of JPEG’s 
you can set Compression Options for 
the file. With sound files you're able to 
set unique MP3 Compression Options. 


Smaller with symbols 


Try bringing down movie file sizes by 
constructing animations using generic 


shapes that you've converted to 
graphics symbols. Draw simple shapes 
like circles and generic triangles, and 
choose Insert>Convert to Symbol to 
place them in the Library. Build 

up components in a scene using them. 
The eventual file size will benefit 
because symbols are only defined 
once in the file. 


You need hands 


If, while drawing, you find that you're 
running out of canvas or the object 
you're working on disappears off the 
edge of the visible work area, you can 
temporarily switch to the Hand tool by 
pressing and holding down the 
spacebar. The Hand tool lets you 

‘pick up’ and move the work area 
around the screen much more quickly 
than scrolling. 


Visual layers 


When working with multiple layers, you 
may sometimes need to isolate 
elements as you work on them. There 
are different ways to do this depending 
on the type of object you're editing and 
the number of layers in the movie. The 
quickest way to isolate a single layer is 
to click on the Show/Hide All Layers 
symbol in the timeline, then make the 
layer you want to work on visible. If you 
want to work on a Library object, 
double-click on it and you'll be taken to 
Symbol Editing mode, with the rest of 
the movie greyed out. Another way to 
visually isolate individual elements is to 
turn on Outline mode. Go to 
View>Outlines. Everything stage is 
rendered as outlines only, with colour 
coding that you can edit by going to 
Modify>Layer. Individual layers can be 
set to Outline view from the Outline 
column in the Timeline. > 


Vectorising bitmaps can sometimes help reduce file sizes, and always makes animation and scaling 


easier to apply. Select the bitmap you want to convert using the Trace Bitmap function. 
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The Hash Challenge 


Proof that that Flash can be used as a front 
end design tool to database driven pages, 
wwwflashchallenge.com is also a gateway to 
some of the Web's best Flash sites. 


Movie Explorer 


In Flash 5, another way to navigate 
through movies is to make use of the 
Movie Explorer. If you're used to older 
versions of Flash it may be easy to 
bypass this useful new feature — 
especially since it doesn’t appear by 
default at launch. For the best results, go 
to Window>Movie Explorer and make 
sure Show Frames and Layers is 
switched on — this lets you choose 
which specific frame and layer you want 
to work on without having to scroll 
through the timeline. 


Flash online 


Add these sites to your Favourites folder 
for the best in Flash online... 

* www.computerarts.co.uk — the latest 
news in the world of digital creativity 
alongside an archive of the freshest 
Flash tutorials from Computer Arts and 
Computer Arts Specials. 

* www.flashkit.com — the 
acknowledged centre of the universe 
for anyone interested in getting the best 
from Flash. The tutorials can be a little 
difficult to follow, but the forums are 
lively and the Flash file downloads are 
the best on the Net. 
*www.flashchallenge.com — listings of 


Flash powered sites reviewed and rated 
by visitors. Looks pretty good too! 

* WWww.praystation.com — for 
inspiration, Praystation always delivers. 
A combination news site, diary, tutorial 
and experimental projects resource. 
*www.were-here.com — a huge 
discussion site 90 per cent dedicated 
to Flash users, from beginners’ queries 
to advanced forums dealing with 
subjects like character animation 

and 3D Flash. 


Float ‘fixed’ panels 


By default, the toolbar in Flash is 
docked — and it looks like it’s stuck 
there too. You can float the toolbar 
though by hovering the cursor over any 
empty area of the toolbar, holding Ctrl 
(or Option) and clicking and dragging. 
This detaches it from its docked 
position, giving you a larger work 
area. It’s even easier to detach the 
timeline: just click and drag onan 
empty area of the panel. 


Banishing panels 


Now you know how to float fixed panels 
so that you can control access to the 
work area, you can go a step further and 
get rid of them altogether. Just press the 
‘tab’ key to temporarily remove all 
floating panels on screen. Pressing 
again brings them back: handy when 
you're in the early stages of a project 
and need to do a lot of layout work. 


Multiple panel sets 


Flash 5, in common with other new 
Macromedia tools, lets you set up and 
save ‘panel sets’. These help you save 
time by enabling you to arrange specific 
sets of tools for different kinds of task. 
To make the most of the feature, start 
with the default layout, then add or 
remove panels according to the task 
you want a panel set for. For example, if 
you want a panel set just for drawing, 
you'll need Mixer, Swatch, Fill and 
Stroke panels visible. You can combine 
them into one single, handy holder by 
clicking on an individual panel tab and 
dragging it to the panel you wish to 
combine it with. Panels you wish to 
remove can be dragged by the panel tab 
anywhere on stage then closed. When 
you've set up the interface the way you 
want it, go to Window>Save Panel 
Layout and give the panel set a 
descriptive name. 


Common shortcuts 


Make using Flash easier with these 
commonly required shortcuts: 


V=Arrow/Cursor 
R= Rectangle 
O=Oval 


With a little ingenuity, and liberal use of 
Alpha Channel effects, Flash can be coaxed 
into emulating the filters features of drawing 
packages with a bitmap bias. 


M= Magnifier 

Ctrl/Command + 1= Reset view to 
100 per cent 

F5 = Add frame to timeline 

F6 = Add keyframe 

F8 = Convert to Symbol 

CTRL click + drag = Duplicates 
current object 

Shift- click with Eyedropper = Selects 
current colour for both fill and stroke. 


Add your own shortcuts 


In Flash 5 you can also set up your own 
keyboard shortcuts — especially handy 
when combined with the previous tip to 
create hotkeys that lay out the screen 
for the specific task you're working on. 
Begin by creating the panel sets you'll 
need for the tasks you find yourself 
performing most often. Next, go to the 
Edit menu and choose Keyboard 
Shortcuts. You'll notice that you can 
create multiple command sets if you 
want, or choose from an existing set that 
emulates the way another package's 
shortcuts work. Start by clicking on the 
Duplicate Set button next to the 
Current Set label, naming the new set 
Flash 5 Custom. In the Commands 
window drill down to the Window menu 
iter, then open Panel Sets by clicking 
on the + icon next to the label. Select 
the panel set you want to add a shortcut 
to and double-click on it. Carefully 
press the key combination you want to 


The ability to add keyboard shortcuts lets 
you configure Flash to work exactly the 
way you need it to. 


assign to the shortcut, making sure to 
avoid existing shortcuts. Try Shift-Alt 
combinations or Ctrl-Alt or Option with 
a letter as the third key. Remember to 
make a note of your new shortcuts! 


Combining shapes 


Flash’s drawing tools are quite different 
to other packages, even with the 
addition of Bézier drawing capabilities 
in Flash 5. This can be used to your 
advantage if you know how to play to the 
package's strengths. For example, 
shapes placed overlapping each other 
in the same layer, which are of the same 
colour, are joined together 
automatically. An overlapping shape of 
a different colour can be used to cut a 
piece away from another shape. Both 
these techniques can be used to create 
complex images using simple elements. 


Drop shadows 


To create text with a drop shadow, for 
example, start by placing some text on 
stage using a fairly large point size. 
Copy this to the clipboard, then create a 
new layer and paste it in. Move Layer 2 
below Layer 1 and offset the text on 
Layer 2 a few pixels down and to the 
right. With the shadow text still 
selected, go to the Character panel and 
set the colour of the text to a dark grey. 
Set the Alpha Channel to about 50 per 
cent in the Mixer panel. Go to 
Modify>Break Apart to change the text 
object into vector shapes, then go to 
Modify>Shape>Soften Fill Edges. Set 
Distance to 1px and Steps to 2. The 
overall effect looks best over a 
textured background. 


Lines to fills 


While we're messing about with the 
Modify menu — you can also convert 
lines to fills. The advantages of this may 
not seem immediate — but fills have 
different properties to lines that you 
can profit from. While lines and Bézier 
curves are easy to adjust and edit, fills 
can have gradients, textures or bitmap 
tiles applied to them. Just select the 
line you want to convert and go to 
Modify>Shape>Convert Lines to Fills. 


Creating Gradients 


Gradient Fills enable you to create the 
illusion of shading so vital if you want to 
add complexity to your vector-based 
animations. In Flash 5 you can choose 
one of the pre-defined gradients or 
make your own by going the Fill panel 
and selecting a Gradient Type from the 
dropdown menu and editing the colours 
on the slider by clicking to select, then 
open up the Colour palette alongside. 
You can add extra transitions by 
clicking on a part of the spectrum 


Creating Gradients Fills is more 

intuitive in Flash 5 than it was in previous 
versions. Just don’t go overboard with the 
psychedelic transitions... 


without a defined colour tab. Click 
the Save icon to use the new gradient 
in your projects. 


Panel parameters 


To save time while entering a lot of 
parameters in a single panel, use the 
‘tab’ key to confirm the entry typed in 
and automatically move to and select 
the next parameter. For example, if you 
want to change the height, width and X 
and Y positions of an object, you can go 
to the info panel and enter the first 
parameter in the Height box — then hit 
‘tab’ to go to the Width box with the next 
parameter already selected and so on... 


Device fonts 


Flash includes three default font types 
that search for common font types ona 
user’s system. These are _sans (Arial, 
Helvetica, Verdana and so on), _ serif 
(Times, Garamond) and _ typewriter 
(Courier). Select these options from the 
Character panel and make sure that the 
Use Device Fonts option is ticked in the 
Text Options panel. Font information is 
taken direct from the user's machine, 
keeping file sizes down and they can be 
used in static or dynamic text boxes. 


Publishing text 


Unless you select Device Fonts in the 
Text Options panel, Flash will try to 


Dig around in the Preferences dialog to 
find gems like a feature that lets you set up 
the timeline so that it’s Flash 4 compatible 
and Layer Colour options. 


Using the Device Fonts setting is handy for 
paragraphs of dynamic text, because they're 
rendered with more clarity than outline fonts 
at low point sizes. 


embed the font outlines you use in 
static text you place in your movies. 
However, not all fonts can be embedded 
in your Flash files when publishing. 
When viewed on another system the 
font will be replaced by an alternative 
that may change the look of your movie. 
You can determine whether this might 
be a problem by going to 
View>Antialias Text — the font still 
looks jagged because the outline can't 
be exported. 

One way to make sure that your type 
comes out the way you intend it to is to 
convert text to vector shapes before 
saving by selecting the text and 
choosing Modify>Break Apart. If you're 
using dynamic text, you can choose to 
only embed those parts of the font that 
are going to be used. 


Old school Flash 


If you're a fan of Flash 4 and can't 
get used to changes in the way the 
timeline works in Flash 5, then turn 
them off! Go to Edit>Preferences 
and in the General section put a 
tick next to Flash 4 Selection Style 
and Flash 4 Frame Drawing. This 
should help you make the transition 
more smoothly. EEE 


Flash §'s interface is easier to customise than before, giving better access to the main work area 
and tools. If you can’t get used to the new timeline changes though, turn them off via the Edit menu. 
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JavaScript Integration 
Kit for Flash 5 tutorial 


The Integration Kit enables Dreamweaver or UltraDev to 
control and modify Flash SWF movies from standard HTML, 
and gives rise to many different possibilities 


y acromedia prides itself on 
( providing Web professionals 
: with the most controllable 
and extensible solutions for 
creating Web content. Anyone with a basic 
knowledge of JavaScript can create weird 
and wonderful extensions, utilities and 
commands that the rest of the world can 
use to improve the functionality of 
Dreamweaver, UltraDev and Flash. 
(© In the past month or so, Macromedia 
SS has taken its software's abilities to new 
heights, incorporating the JavaScript 


Integration Kit for Flash 5. What makes this 
development different from the rest is that 
it’s for Dreamweaver. 

The /ntegration Kit plays on the new 
architecture of Flash 5, which has a full 
JavaScript library (bar the six non-cross 
browser compatible commands) to control 
extra interactivity instead of the old 
ActionScript bolt-on. Here, we're looking 
at the possibilities provided by two of the 
suite’s best functions: Advanced Form 
Validations for Flash forms and the Flash 
Deployment Kit. 


i 


Part 1: Flash control 


We'll start by creating a zooming and panning solution for our Flash movie 


Form Validations 


The Advanced Form Validations 
included in the site also have the 
ability to validate credit cards, 
which also automatically remove 
spaces or hyphens, time (so 
anyone who lingers can be 
prompted for a response) and 
even social security numbers. 


‘The 

a First, go to the Macromedia Exchange, log-in 
to the Dreamweaver Exchange, and type 

JavaScript in the extensions search box. You should —— 
be able to see the JavaScript Integration Kit for Create a new site called Computer Arts, 
Flash 5 extension suite, which can then be select the relevant location on your hard drive 
downloaded for both Mac and PC. Install this into and copy the ‘bigimpact.swf' file from the cover 
the Extensions Manager, and you're ready to roll. CD-ROM to a directory named ‘Flash’. 


4 | Now, under the Flash movie create a 1 row, G In the cells, create six rollover buttons from 
6 column table, 300 pixels wide, with no the graphic files in the ‘console’ directory 
border and 3 cell spacing and padding. on the cover CD. 


Now centre the Flash movie and the 
mini console by using the word style position 
in the Properties Inspector, or — which you may 
prefer — by nesting in a 100 per cent table and 
centring the table data. 


7 Select the grey Flash movie, enter a name 
and ID into the relevant boxes in the Properties 
Inspector. Make sure the ID and the Name are 
exactly the same: this prevents any browser 
compatibility problems. 


Create a new page, save it as ‘index.html’ and 

place the ‘bigimpact.swf' file on the page, set 
to 75 per cent width and 75 per cent height. The 
scaling of the movie is very important, as we are 
going to create a zoom in, out and pan left and right 
interface. The Integration Kit offers many more 
features for you to explore. 


G Clear cell heights to remove excess cell space — 
it is the small button on the bottom-left of the 
Properties floating palette. We are now going to use 
the JavaScript Integration Kit to zoom in and pan 
around the Flash movie. The same techniques can 
be applied to any of your Flash 5 movies. 


9 | Now click on the left pointing button created 
in the mini console. Open the Behaviour 
Inspector by pressing Shift+F3 or access it through 
the Windows menu. > 
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Part 1: Flash control continued... 


Cookie jar 


The previously tricky task of 
getting Flash to use cookies 
without using Generator has been 
made much easier, as the HTML 
Page now creates and retrieves 
cookie information, passing and 
receiving from Flash. Great for 
simple site personalisation. 


Now click on the Plus button in the 

Behaviour Inspector. You should notice some 
changes to your usual configuration, mainly new 
options. Select the MM Flash Player Controls 
option, and then Pan movie. 


Now click on the Mouse Event arrow and 

select OnMouseDown. This means the action 
will take place when you actually complete a mouse 
click. Complete all these steps for the right facing 
arrow and preview in the browser. 


16 Do the same for the Minus button, making 
sure that you enter 102 per cent for the Zoom 
value. Despite the higher number, this will actually 
zoom in, but not until you have zoomed out of the 
initial movie. Make sure OnMouseDown is selected 
as the action for both of these operations. 


You will now be presented with this dialog 

box. Select pan left and click the radio box for 
percentage. Now enter 2 for the Pan value. This is, 
of course, customisable, but 1 per cent is too low 
and 3 or higher pans quite jerkily. 


14] You probably found that absolutely nothing 
happened. This is because pan needs to work 
in conjunction with the zoom function, because the 
computer has no information outside the border of 
the Flash movie to pan to. Select the Plus button 
and select the Zoom behaviour from the MM Flash 
Player Controls selection. 


On the up and down buttons, add the Pan 
behaviour again. The up and down operates 

slightly differently from the left and right functions. 

We want the movie to move up when we press up, 

so we have to pan down (confusingly!), again by 

2 per cent per click. Do the same and reverse for the 

down button. Preview. 


The pan, zoom and other controls work on 

version 3 browsers: some are very buggy on 
Netscape (no surprise there). However, version 3 
browsers have less JavaScript action functions. This 
means you can only attach onMouseMove or 
OnMouseOver. Click the Plus button, or click on the 
Mouse Event arrow and choose Show Behaviours 
for version 4.0 browsers. 


You will now get this dialog box. It has 
100 per cent set as the Default value. 

The maths is slightly mind-boggling, this is the 

easy version: numbers lower than 100 per cent 

make the Flash movie bigger. Simple. Select 98 

per cent, for the same reason we selected 

2 per cent for the Pan values. 


tommer : 
Sooe0s 


18 | There you have it, a complete solution for 
zooming and panning. What use is that, we 
hear you cry? We have just implemented a full 
solution for allowing visually impaired users to read 
all the content on your Flash site. Clever. Eh? You 
can also add the Pan and Zoom behaviours to zoom 
in 10 per cent with the OnDoubleClick action, for 
speed zooming. 


Part 2: Advanced Form Validations 


Everyone knows that you can create fully working forms in Flash, but we'd be 
surprised if you've ever met someone who can put one together. Until now, that is... 


Bit part 

Other Flash movie controls we 
haven't had time to cover here 
include pause, play, rewind and 
fast forward. This is a great 
addition for Flash introductions, 
so people can view specific parts 
without needing to play the entire 
sequence again. 


serene “eT neeee Pere on 


’ [ener se =a 


Losi — We need to prepare two things, the 
1 | Flash 5 has made it significantly easier to Flash movie containing the Flash form, 
set these forms up, and the JavaScript and the DreamWeaver HTML page which will have 


Integration Kit adds a whole further dimension to its extra functionality added to interpret the Flash 

capabilities. Set up a new page in DW and create a form, via the Integration Kit. Create three hidden 

form named Computer Arts. Save the page as fields within the form, named: name, email and Now open Flash - we are going to create the 
‘flashform.html’ phonenumber (no spaces). BB Flash form from scratch. 


a 
SEIT TL 
AIR Sia! 


~ - 5 | Select the Text tool and drag a text box in line 
Add Name, eMail and Phone text. We've 


with the ‘Name’ text. Select the Text Options 


used the Hemi Head 426 font. If you don't tab from the floating palettes, and select input text 
have this, Italic Impact looks cool. Create a new from the dropdown. Much easier than the Flash 4 G Click the box created earlier, copy and paste it 
layer, lock the old one. Don't forget to give the layer _‘click the tiny box for input text’ function, which three times, and line them up nicely, either by 
you put the text on a suitable name. nobody knew about! eye or by the much improved Align commands. 


Select the top text input box and the outline 
will turn blue. You'll also see that new options 

appear in the Text palette. Click the ‘embed entire 

font’ outline — this is a great new feature that 8 | Now insert the new symbol and select it . : - 

enables any users without the font we're using here as a button. The keyboard shortcut for this Position the submit button on a new player on 

to use it when filling in the form. is Shift+F8. the page and scale to your liking. > 


Flash Special] 63 | 
arts 


Part 2: Advanced Form Validations continued... 


Pick your movie 


The Load Flash Movie control 
enables the insertion of different 
Flash movies into your page 
which appear when selected. It 
works much like the classic 
Shockwave Machine, and is great 
for creating Flash Game 
Selection consoles. 
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10 Select the three text boxes, embed the font in 
each, and name each with a variable which is 


the same as the hidden fields from the HTML page: 
Name, email and Phone. 


We need to assign the FDK_setFormText 


mw function to the OnPress event for the submit 
button. The FDK_setFormText action is contained in 
the Behaviours in Dreamweaver, so we have to 
insert a bit of text manually, into the ‘URL’ textfield. 


Draw a transparent box on a new layer, around 
each of the three text fields. 


aaa 


Right-click on the submit button we 
have created, and select Actions from the 
right-click menu. 


In the URL textfield, enter the exact following: 

javascript: DK_setFormText(‘computerarts’, 
‘name'"add name 
add”’);FDK_setFormText(‘computerarts’,'email’” 
add email 
add"’);FDK_setFormText(‘computerarts’,'‘name’” 
add phonenumber add""); 


Save your movie as whatever name you like 

and export as an .SWF, then return to 
Dreamweaver. Underneath the form (although this 
is not strictly necessary) import the Flash .SWF file 
just made. As in the first project, name and id the 
movie ‘FlashForm’. 


12 Drag the Get Url action from the Basic 

Actions folder to the right-hand side. Select 

on (press) by highlighting the default OnRelease 

behaviour with your mouse. Be sure to de-select 
the OnRelease command. 


C= 
Now do the same thing again for the 

FDK_Validate action, using the GetUrl action 
directly underneath the piece of JavaScript you can 
already see in the compiler window. This time, you 
will need OnRelease — which is the default mouse 
action. Type the following in the URL input field: 
Javascript:DK_Validate(‘computerarts',false,true,'T 
he Form Could Not Be Sent\n\n’). 


18 Select the Form tag within your HTML 
document. Make sure the Behaviours Inspector 
is onscreen, and click the Plus button. Then select 
Advanced Form Validations. This starts the Form 
Validations working, and tallies up to the validation 
script we directed our Flash movie to. You should 
see onSubmit appear in your Behaviours box. 


as 


Part 3: Applying validations 
Now we need to actually apply whatever validations we want... 


Take action 


The Flash Development Kit 

is definitely not for beginners. 
Some functions can be 
added easily, but for 
Advanced Form Validations, 
some basic knowledge of 
how to point actions at 
JavaScripts is beneficial. 


Technical hitch 


The Flash Integration Kitfor 
Flash 5, as the name suggests, 
will not work in Flash 4. Sorry 
about that, but the upgrade is 
well recommended. 


rt | We need alphanumeric validations for 


the Name and Number Flash fields, and Click the Plus button in your Behaviours 
an email validation for the Email field. Select the palette, select Advanced Form Validations and 
body tag on your page. Alphanumeric Validations from the submenu. 


You will get a list of all the final extra scripts 

the kit adds. We are interested in the first 
script, which should have its checkbox ticked by 
default. You should see it has the same name as the 
script typed into Flash earlier. This will take the text 
that is passed from Flash, on OnMouseDown. 


Now we need to make sure that the text 

inserted into the Flash form actually gets 
passed to the hidden fields in the HTML page, and 
for this we need to use the third part of the Flash 
Development Kit. Go to Commands and select 
Browser Scripts for Flash. 


‘Terese 


ray Preview the page, and try some typing. You 

should see the font used in Flash on any 
computer, even if the font isn't installed. Type some 
rubbish, send the form and you should see an error 
message corresponding to the default error message 
we saw when adding the validations! 


is selected, and the Action points to 
thanks.html. On a successful form submission, you 
will redirect to this page. To actually receive the 
form info, either do a standard mailto: as the Action 
or hook it up to point to whatever CGI or ASP script 
usually handles your mail. 


8 | Make sure POST (or GET if you are on a Mac) 


You will see a dialog box come up. You need to 

apply the behaviour separately for each hidden 
field, so do the same for phonenumber and add the 
email validation to the email field. 


G You will see an unusual mouse action in the 
Behaviours palette, don't worry about this, it 

makes the action work! Check that the form tag has 
OnLoad Advanced Validate attached, and the body —-—- 
tag has three separate validations. 


Well done. You have created a cool zooming 

panning Flash movie and an advanced, very 
tricky, form validation. This has shown you just a 
fraction of the power of this plugin for 
Dreamweaver and Flash. Play around and make 
some more masterpieces! 
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This month in 
computerp 


MUSIC 


The complete guide for Mac and PC 


Dream machines 


We discover why Digidesign’s Pro Tools has 
become the choice of the professional musician, 
and ask whether you can achieve similar levels of 
creative potency with your home set-up 


The Nu breed 


Steinberg are attempting to enter the high-end 
recording arena with their Nuendo software, and 
we've got an in-depth review of the latest version. 


The laptop of luxury 

Is it possible to squeeze every stage of the music 
production process, from composition to 
mastering, into a laptop? Computer Music and 
Future Loop Foundation investigate... 


On Sale 22/03/01 


Computer Music is your complete guide to making music with your Mac and PC. 
News and reviews of the latest hardware and software are married to practical, 
creative advice, SO you can make the most of your gear and your talent. 
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HIT Entertainment 


" Wow! That's brilliant! Gang 
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The owners of Bob The Builder are using Flash to entice a stream of toddlers on to the Net to plau. 
“If you want interactivity use Flash,” says HIT’s New Media director. You can’t arque with that 


reedom. Mel Gibson fought for it in 
Braveheart. It’s what all designers crave. 


f | i] Being given a free rein to design a site for 


i children’s TV character and unlikely pop 
hero, Bob The Builder, meant that the new media 
division of HIT Entertainment could take its time 
and do things its way. 

But it still had to meet the needs of Bob’s biggest 
fans — pre-schoolers who can barely read, can't write 
much, and have the attention span of ants. 

The result is a fistful of fun Flash games at 
www.bobthebuilder.com. This is one site where the use 
of Flash makes perfect sense. There isn't a lot of 
information to convey or navigation to work around, the 
site is there for young kids who want to play with their 
hero. It’s designed purely to be interactive. 

But if there’s one thing that Simon Jones, director of 
new media for HIT Entertainment, and his team, didn't 
want to do, it was to go overboard on fancy features that 
wouldn't be needed. 

“A lot of people just go over the top,” says Jones of 
many examples of Flash on the Web. “We were 
designing in layman's terms.” This meant keeping 
things simple and sticking to the job in hand. And the 
most important aspect of that job was keeping things 
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fast. “We spent tons of time optimising everything,” 
says Jones. “When you're dealing with kids, speed is a 
premium. We streamlined everything so many times to 
bring down the file sizes.” 

He admits they're lucky because they work 
in-house. “We're able to get away with a lot,” he 
says, “we're not waiting for the next client coming 
in.” And the results speak for themselves. Each game 
takes under 30 seconds to load and the crisp graphics 
look fantastic. 

Unless, that is, you have a slow machine when you 
‘Help Mr Dixon with his deliveries’. The need for speed 
meant this driving game on the site, where the user 
manipulates a small digger to pick up parcels, was the 
trickiest to build. “The more graphics we put in the 
slower it became,” sighs Jones. “Flash relies so much 
on the speed of the user's processor. Ona slow 
machine it just crawls.” 

The problem was alleviated somewhat by inserting a 
sniffer to detect the speed of a visitor’s machine. The 
quality of the graphics drops for slower machines so 
that the speed picks up. Consequently, this game is the 
poorest looking of the lot, especially for those on 
machines clocking in at less than 400MHz. But the 
other eight games look great. One particular highlight 


of the site is the rich printout you get from the 
colouring games. Scoop the Digger may occupy a 
small window onscreen but he prints on to a full A4 
sheet. It wasn’t an easy accomplishment behind the 
scenes. “We did a lot of fiddly things to get the printing 
to work,” remembers Jones. “We did a lot of bad 
printouts before that one came out.” 

So far the site has been a storming success. The 
result has been folders full of e-mails for the new 
media team. Many of these relate to technical 
problems that users are having that relate to their 
machines and browsers. “They're nothing to do with us 
but we get the questions,” says Jones. In response the 
team will soon be putting up a technical FAQ that will 
direct people to the appropriate places to get help. 

And, of course, there’s been lots of fan mail for 
Bob. “We've had e-mails from parents telling us 
their two-and-half-year old uses the computer,” 
says Jones somewhat incredulously. They can't 
read, they can't write, but thanks to HIT’s use of Flash, 
Bob is bringing the tiny tot generation online. Power 
to the pre-schooler. EES 
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This jigsaw has 12 pieces. 


ie. 


1, HIT has designed the Bob the Builder site with extensibility in mind: 
new houses occupied by new people and new games can be added. 


2. HIT could have got extra fancy with its Flash but that’s not what the job 
demanded. The Flash games had to be simple for kids, easy to see and 
understand, and fast enough to download in a jiffy. 


3. The HIT squad bought the digger toys from a toy shop, built them in 3ds 
max, then optimised them in Flash so they would load as fast as possible. 


4. Speed is of the essence when Bob is competing with daytime TV. 
None of the games takes longer than 30 seconds to load and most are 
quicker than that. The preloader image is big and bold and makes the 
progress easy to track. 


5. Speech bubbles appear throughout the site but there are no 
accompanying sound files. But speech will be coming soon — just as soon 
as HIT can get Bob and his friends into the studio to do their recordings. 


Bo 


Builder 


6. All the favourite Bob characters appear on the site but the site design 
was left up to the new media team. “It’s our area of expertise,” says Jones, 
“,.and everyone's been really pleased.” 


7. Scoop was bought from a shop then built by the new media team in 3ds 
max. Rendering the image out to a vector format created cumbersome 
files that had to be shrunk for the Web as much as possible. “Companies 
get tied up with 2MB lines at work. They forget what it’s like at home. We 
go home and test it as often as possible.” 


8. Jones’ biggest beef with Flashis the same as many others - the drawing 
tools aren't great. But they're still fun for kids: youngsters can colour in 
pictures on the screen and then print them out on A4, or they can print out 
the picture and colour it in offline. 


9. It isn’t all about 3D rendering. Designing fun and educational games 
isn’t easy. Simon and his team read books aimed at tots and examined 
other spelling games to get ideas for what might work on the Bob site. > 


Flash Special 


Character drawing and animation 


In this tutorial, HIT explains how to import a traceable 


bitmap image, create a vector version and animate it 


Part 1: Movie set-up 


Motion tweening our animated character along the timeline 


Motion tweening 


Motion tweening is important 
to add realism to movements, 
rotations and scaling. Positive 
values start off quickly then 
decelerate towards the next 
keyframe. Negative values 
start off slowly and accelerate 
towards the next keyframe. 
The scale of the value affects 
how much acceleration/ 
deceleration occurs, 


Flash Special 


1 | Set Movie Properties with Modify>Movie. 10 
frames per second, dimensions 600x400. 
Create a new movie symbol using Insert>New 
Symbol>Movie Clip. Import your bitmap image 
then lock that layer. Add a new layer, set it to 
Outline mode and choose a layer colour that can be 
seen easily over the bitmap. 


Adjust the centre of each symbol so it’s 

relevant as a point of rotation, such as the 
shoulder for the pivot of the arm and the 
approximate centre of gravity on the umbrella. 
When this is done you may have to reposition them 
in the movie. 


The head is keyframed on exactly the same 

frames as the body/umbrella with the same 
Ease values. At frame 21 the head needs moving 
down and back to keep the illusion that it is 
attached to the body. 


Trace with the Straight Line or Pen tool, 


Ctrl-clicking with the Arrow tool to add points. 
Use Alt with the Subselect tool to modify the 
handles, keeping points to a minimum. Think about 
what will animate and group elements together 
temporarily with Ctrl+G as you work through. 


Make the movie 50 frames long, set a 

keyframe at 17 with the arm rotated back and 
at 27 with it up, then copy frames 0 to 45. Select all 
the keyframes and Insert>Create Motion Tween. Set 
frames 0 and 27 with Ease values of -100 and set 
frame 17 with an Ease of +100. 


As a final touch, add masks to the arm and 

body/umbrella layers to create the illusion of 
dipping into water. Keep the area to a minimum as 
Flash's frame rate is influenced by the amount it has 
to draw and the area and complexity of fills. Add 
new layers above the arm and body/umbrella 
layers. Draw filled rectangles without an outline in 
the Mask layers. Set the layers to Outline mode. 
Tweak and/or add points to optimise the shape, 
scrubbing the frame bar back and forth to see the 
elements rotate. 


OOOCOT LNA 
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Using F8 converts the elements into symbols. 

The arm and body/umbrella are graphics and 
the head is a Movie Clip to animate the eyes 
blinking. Cut and Shift-paste each symbol into its 
own layer to keep them in position. 


6 | Keyframe the character's body/umbrella 
rotating backwards. The first keyframe is 
added at frame 6, the second at frame 21, and 
the third at frame 40. Ease frame 6 with -100 
and frame 21 with +100. This sets the action 

so that it accelerates rotating backwards and then 
comes back to rest slowly. 


p Finally, to have blinking eyes, double-click on 
the keyframe in frame O on the Head layer to 
edit the symbol. Cut and Shift-paste the eye white 
to a lower new layer. Create another new layer 
between the eye and head and again Shift-paste the 
eye white. Fill this with skin colour to represent the 
eyelid. Make the first eye and head layers 50 frames 
long, make the middle eyelid layer 4 frames long. 


Part 2: Landscape set-up 


Create background features to scroll seamlessly 


The first step to having seamless backgrounds 

is to draw half the necessary detail in a new 
graphic symbol so that it's the same width of the 
overall movie. The next step makes it more obvious 
why you just draw half. 


Create a new movie symbol. Drag two 
instances of the background graphic from the 
Library. Centre one using the Align tool with Align 
to Stage active. Flip the other with Modify> 
Transform>Flip Horizontal. Activate object snapping 
with View>Snap to Objects. Align the left edge of 
the flipped graphic with the right edge of the 
original. The adjoining seams should match up. 


3 Repeat this process for all the background 
details. Our game had two sets of hills, the 

riverbank and a wake at the river's edge. Props such 
as trees and fences can be placed within the Movie 
Clips to aid the illusion of travelling. The movies are 
now ready to be placed in layers on the main 
timeline. Remember to give them independent 
instance names so that they can be referenced in 
code to be scrolled. 


Part 3: Coding set-up 


Create the necessary structure for the game code 


Planning ahead 


Although our game is only 

3 frames long at the moment, 
there may come a time when 

it needs to be expanded - this 

is why we have used 
gotoAndPlay(_currentFrame — 
1). Ifthe frames get moved along 
the timeline, this piece of code 
will continue to function in 
exactly the same way because it 
always passes program control 
back to the previous frame. 


a Set up the structure of the code on the 
timeline. This will consist of three keyframes of 
code which will consist of a variable set-up frame, 
the game code frame, and the looping frame. 
Create your three frames on the main timeline 
and add the code for the loop in frame three, 
name the layer ‘code’. Notice that we are using 
GotoAndPlay(...) this is to keep the code ‘alive’ 
during the game loop. 


Now we need to place all the elements that are 

to be used in the game. In our game, this 
includes far hills, near hills, river bank and wake for 
the background and a flag for the start and finish. 
The foreground elements are our two competitors. 
Also add any other static elements such as the river 
and the sky. All these elements should cover at least 
frames 2 and 3. 


The final library element we need is a button. 
Create a new button element and place two 
off-screen copies of it on the timeline, again 
covering frames 2 and 3. The button needn't 
contain anything — although a dummy graphic may 
be handy because it makes it easier to select when 
you're working on it. The purpose of these will 
become apparent in the controlling the player stage. 


Part 4: Game variables 


Set up all the necessary variables for controlling the game elements 


Still Flash 4 


You may have noticed that the 
‘arrays’ used are of the Flash 4 
sort as opposed to the now 
‘proper’ Array object in Flash 5. 
This is because we decided to 
stick with Flash 4 where little or 
no inconvenience is caused 
simply because more people 
have the Flash 4 plug-in (it does 
come with IES after all). 
Obviously in six months time, this 
won't be a factor. 


We need to set up a number of variables in the 
first frame of our code. This first set of 
variables is concerned with the background 
scrolling. In a parallax scrolling system such as the 
one we will be implementing, each independently 
scrolling layer will an ..._x and a ..._phase variable. 


Now on to the variables needed for each of 
the competitors. These are the state variables 
which are needed to tell the code where the 
competitor is, how fast it is going and so on. A loop 
may seem OTT because there are only two 
competitors but it eliminates the risk of spelling a 
variable name differently for each competitor — 
always a risk in a weakly-typed language. You may 
also want to expand to many competitors later. 


All that is left is the rest of the game state 


variables so we can detect the end of the 
race, keep a limit on the speed of the competitors, 
make a note of how the competitor is controlled 
and keep track of the button presses. These will be 
employed in a ‘Track & Field’ type manner where 
the user has to hammer them alternately to gain 
speed. Now on to frame 2. > 
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Part 5: Coding the Parallax scrolling 


Putting the code in place for independent layer movement in frame 2 


i1lsl_x -= eval("speed" 
i1is2_x -= eval(” oo ae a 0 


add p03*0. 5; 75; 


bank_x -= eval(" spee po 
spoet a p09*1.25; 


ake_x -= 2+eval(" 


Go We will now be using the human controller 
competitors speed to control the way the 
background moves in the game loop. Because each 
layer is supposed to be at a different distance, each 
has a different multiplier: the larger the multiplier 
the further away it seems. The wake layer also has 
a constant, 2, added on to give the impression of 

a flowing river. 


pif Chillsi_x<0 and hillsistate == - { 
P] tel Targee Chi tist nti") 
x = 920.9; 

Jitanipins -1; 
JF Chil 1s1_x<-607 and hi1 


tell Target. 367" hilisl/hi 
=" 


== 1 
hire aaa 


isis cole = 0; 
hilisi_x += 1228; 


Now to get the backgrounds to wrap around 
smoothly. Detailed is the code for the far hills, 
‘hills1'. All scrolling elements start with a Phase 
value set to zero. The Phase variable takes care of 
shifting and resetting the two sub-elements in order 
to maintain coverage of the full width of the screen. 


elltarget C“hills1”) { 
eae Z /:hil six; 


pase ALE Ate { 


tel ltarget ("bank") { 
H Te /:bank_x; 


ellTarget C"wake") { 
x = /:wake. 


x; 


All that remains now is to make sure the 
movement is passed on to the elements 
themselves. The reason for keeping the x variables 
and the actual x properties separate until the last 
possible moment is to keep a distinction between 

the rendering and the game logic. 


Part 6: Setting up the game loop 


Getting code structure in place before we add the detail 


1] A for loop is used to take care of all the action 
as far as the two competitors are concerned. 
This may seem like overkill again but it makes the 
code readable and easily expandable to a many 
competitor race at a later date. 


nad? 12," $ral Clana” sad {9 


auld 
Festa aka 19) ¢ 
Hint shest a0 1) © trues 


The lane array contains the distance each 
competitor has travelled. The speed of the 


competitor is added on each frame and this distance 


is checked to see if it has exceeded the race length. 


og |) 
et ade sSoen rsstenth ine Ter Ret sned a8 499 
ve hed” add 4) » tri } 
1 Pergcen 3 i 


if a jen st add # 
ent 


5 evaletepene” ado 1) = 0 


7 eavesvenevever 


Once the race has finished, we want the 
competitors to gradually come to a halt. Check 
the finish status and decrease the speed accordingly. 


Part 7: Controlling the competitors 


How to get all the competitors moving 


press, keyPress "Zz 

if ClastPress |= BUTTON_LEFT) { 
rated += inc; 
lastPress = BUTTON_LEFT; 


The two buttons added in 15 need to have 
code added to them so the user can control his 
or her competitor. The above shows code for one of 
them, for the other change the ‘left’ to ‘right’ and 
z' to 'x' where appropriate. 
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nate a allied 9 ¢ 
ale Fintemen” f 

wees? Sob « 
Retraaar eat hy 01 


ccapmoase egies seead” ado 1992) ¢ 


spate” add 


E82 fy oe snes 


‘andonteval eset)” 20d 493/196)¢Ine; 


Add this code to mimic button presses for the 

computer controlled player. The two parts of 
the ‘if! clause deal with accelerating to top speed 
and then maintaining it. Because the top speed is a 
variable it can be adjusted in the code in frame 1 to 
make the game easier or harder. 


ee 
eva lane” add ty aC lane” 4 4 
spiel awe aig "Soar ‘ length real Rated ata 199 ¢ 
eval (Fini shed’ 
fF Coval C’finished” 1 
8) seta Bob ¢ 
alC’speed” add 4 
yeige 
) eval C"epeed” add 1) © 0; 


, 


/ *¥eratep az0ree 


if Gv a fe 4 add pe peda ao 


delee 
eval Giwate” add 4) © 0; 


/ reenrnereeers 


JJ 4.4. under computer contro? 


To stop the competitors accelerating forever 

some sort of friction-like factor needs to be 
introduced. This ‘slowDown'’, with a value set-up in 
frame 1 of 0.45, gives a good balance between 
acceleration and deceleration. 


‘ihn 


rate” 1d 4) -= sloow; 


{ 
eval (‘rate* add 4) = 0; 


49 and eve CTpow" add 49 we Lane truceover) ( 


),! {// i.e. under computer control 


Vrarget ("player* add 4) { 
x = eval ((/sVane" add /:5)-eval (/: Vane" add /2p0}4300; 


therrdereetereter 
if (start) { 
if (eval ("toospees™ add 4)-eval (“speed” add 1)>2) 
Rig Crate’ add i) += (Larandom(eval ('skiT1" AF 4))/10) tine; 


Vel 
7 + banka snp { 
eval ("rate” add 1) += inc; 


50) +300; 


seseeng, 368 10 498.4920 
te ads TF oe Atataaetenel nel tabs 19/2002"; 


6 | The last important step in the for loop is to tell 
the competitor movies which frame to play. 


. 5 | A couple of augmentations to our ‘if’ clause The reason for having 50 frames of animation for 
All the action is relative to the user's in order to ascertain which competitor the characters now becomes clear: the speed 
competitor, so the computer controlled has crossed the line first. The code above just variable is used to skip through the frames so that 
competitor needs to be moved on the screen to displays a message and stops but you could add the movement ties in with the animation. If it were 
reflect its relative position. jumps to ending screens. less frames this would look odd. 


Part 8: Final details 


Just a few code elements remain before the game is functional 


aos | - dd 4) io" add 1); 
ne aad 1Soeracetangth and teval Finished” 264/49) { 
ini ad = true; 


te Gal Cfiotshed” add Bef 
eee speed” 2% 
teat “Speed” add 4 
dele { 
eval C'speed™ add ‘in8 


Wy) teevstep s1eeee 
CiFintshego and jreneneny { 
4 Doe € 


weewerrrereerer 


“Tse! id & rt; re) 
Craver aga 4 
eed’ 2dd'4)'= ine {100° rate-rate*rate/Factor))/100; 


f (eval (irate* add i2>Vimit) ( 
evalCrate” add i) = limit; 


Vitarget_Chilts1") ¢ 
= /hi slg 
Vitarget, C"hi1}s2") ( 

yen 82; vee 


if (eval ("rate" add 1)>6Tomboen) { 
‘ 1fyaiCrrate” add 1) -= slowdown; 
else 
eval Crate” add 1) = 0; 


- 2 One last amendment within the for loop: the To start the race off, create a movie with text 
3 We've set up the variables and tested the rate and the speed variables haven't yet been placed at suitable intervals along the lines of 
values for the positions but have yet to add the _ tied together. This piece of initially confusing- ‘ready, steady, go’. On the same first frame, the 
code that sorts them. This simple piece of code does __ looking code does the job. It is a quadratic function word go appears add the code ‘/:start = true;’. If 
the trick quickly for a two competitor race — a more which approaches a limit (within certain bounds). you look back to our for loop this will stop any false 
complex sort would be needed if there were more. The purpose is to make the race closer run. starts with the if(start) conditions. 


westep 3 


f (eval C’lane” add 2 moe imag { 
teltTarget CF 
“« fre jacet ength~ eval ("/: lane” add /:p0}+200; 


+ 
ORF Ceval(tane™ add 70} <400) { 
vat (2 tane” add /:p0); 


tel Farges C°F Ta 


Finally, the start and finish flag. Make sure that 
you place the flag off the screen but at the 


4 | Add a dynamic text box to inform the user correct height on the timeline. This code will scroll it 6 | That's it, although plenty could be added: more 
whether they have won or lost. Put ‘endText’ into view at the start and the finish. Some trial and characters and a front end for selecting them, 
in the variable field so that it ties in with the variable _ error will be involved with the numbers to get it an ending screen for winner or loser or a Perl-based 
in the code that is set at the end of the race. looking right on the screen. high score table, are just a few ideas. EEE 
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Flash Exchange 


Macromedia's Flash Exchange is place where you can download, upload and 
exchange Extensions, Movie Clips and add-ons for use in your own projects 


Hh) 


he concept of sharing has 
been the cornerstone of the 
Web since the moment it 

| was born, back in the days of 
CERN and ArpaNet. Indeed, this was its 
raison d’étre, and little has changed 
amid the anarchic hubbub of spamming 
buccaneers and corporations. The 
caring, sharing communities are 
proving to be the Net’s cash cows, while 


Essential extensions 


No, it's not a playlist from Pete Tong but a selection of downloadable Extensions 
worth investigating, from pop-up windows to icons to preloaders... 


Macromedia 
Dashboard 


Category: Rich Media 
Author: Macromedia 


The near-essential download 
for all Flash users has to be 
Macromedia’s own 
Dashboard, which adds a 

new panel to your Flash 
application interface. This 
displays an SWF mini-page 
offering Flash-related news, 
technotes and features, as well 
as links to a variety of 
resources and community 
areas. The extension offers an 
auto-update system, but the 
content isn't updated nearly 
often enough to make it useful 
~ a surprising lack of attention 
from the company that makes 
Generator. At the time of 
writing, February 2001, the 
news refers to November 
2000. Nevertheless, the links 
are useful, and promise for the 
future is a bright. 
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OS UI Elements 
Category: Navigation 
Author: An Carr 


This extension is a simple 
package of interactive 
graphical UI (user interface) 
widgets you can drag from a 
common Library into your 
Flash projects. The package 
comprises three folders of 
clips: one of Mac-style clips 
and one of PC-style clips, 
each including buttons, a 
dropdown menu, form 
elements, scroll bars and Ul 
graphics. The third folder 
contains ‘common clips, 
including a Flash Player 
control panel, Icons and 
miscellaneous buttons and 
sliders. Allin all, a fantastic 
offering and well worth 

the download. 


Draggable Magnifier 
Lens 

Category: Rich Media 
Author: lan Kelleigh 


A great idea in principle, this 
clip adds an entry to your 
Help>Samples menu offering 
a drag-and-drop magnifying 
lens clip to add to your 
movies. Users can then drag 
the magnifying lens around 
your Flash movie, and guess 
what, it really magnifies! It’s a 
little hard to set up and get 
working properly: you'll 
almost certainly need to refer 
to the PDF help file that comes 
with the download, but this 
also includes detailed 
instructions on how to 
customise your lens and take 
the ActionScripting further. 


the mega-budget entrepreneurs are 
cutting back on spending and staffing. It 
isn't just the Net that benefits from this 
communal philosophy: anyone 
swapping ideas stands to gain from this 
pool of knowledge and technology. 


Swapsies 


If you've ever tried to do great design on 
your own — and we mean in the sense 


Smart Preloader 
Category: Productivity 
Author: Macromedia 


Preloading Flash movies of 
any substantial size is nigh-on 
essential if you don't want 
erratic play-back. The art of 
this is to keep your visitor 
occupied during the process, 
and ideally give them some 
idea how long they’ve got to 
wait. Macromedia has risen to 
the challenge here with a 
quick and easy extension 
offering Windows and 
Mac-style Percentage 
Preloader bars which you can 
just drag as Smartclips into 
your Flash movie. Add the bar 
in its own separate scene, 
complete a few details as 
explained in the Help file, and 
the Smartclip deals with the 
rest. Brilliant! 


of having no one to bounce ideas off, 
rather than simply taking a solitary, 
creative moment — then you’ll know 
that the process can be dull and 
frustrating. Which is probably why sites 
like the Computer Arts Discussion 
Forum (at [w] www.computerarts.co.uk/ 
forum), and Macromedia's Exchange 
sites have become some of the most 
popular areas on the Web, targeting 


Pop-up Window 


Category: Browsers 
Author: Mike Chambers 


The pop-up window has 
become a firm favourite 

with designers, who like to 
control details about exactly 
how users see their sites. 

This is easy enough to do in 
HTML, with a simple 
copy-and-paste JavaScript, 
but people often ask how they 
can do the same within Flash, 
which has no pre-built 
function to do the job. The 
Smartclip comes to the 
rescue with a little combined 
ActionScript and JavaScript 
wizardry. All you need to do is 
drag it onto a frame anywhere 
in your movie — which can be 
a button state frame — and set 
up the URL, window size and 
so on in your Clip Parameters 
panel. Simple. 


people with a specific interest. But 
unlike the Computer Arts Forum, 
Macromedia’s Flash Exchange (at 

[w] www.macromedia.com/exchange/ 
flash) doesn't just exist for the sake of 
creative banter, Q&A's and other such 
social interaction. It’s also a place 
where you can download, upload and 
exchange Flash extensions, Movie Clips 
and add-ons created by like-minded 
people, then play with them, seek 
inspiration, even use them in your 

own projects. 


Free for all 


Everything in Macromedia’s Exchange 
is free, but make no mistake: this is no 
chaotic archive of half-baked apps 
promising the earth and offering little in 
return. The whole download repository 
is carefully monitored and organised by 
Macromedia itself, with a serious 
high-quality ethic. 

If you’re arriving for the first time, 
you'll be asked to register with some 
basic information — your name, email 
address, all the usuals — but there’s no 
need to sign in every time. The site will 
automatically log you in as you arrive on 
the same computer, every time. 

You'll also have to download 
Macromedia’s Extension Manager, 
which you'll find a link for on your 
starting page. This contains tools for 
automatically installing and managing 
your downloaded extensions — for 
Dreamweaver and UltraDev as well as 
Flash, if you use these apps. The 
download is only 2MB or thereabouts, 
and even if you're on a modem, this will 
be worth the delay, even a few restarts. 

That done, you're ready to get 
clicking. The Exchange starting page is 
a relatively simple affair, and you may 
think that there isn’t a lot there: a few 


More in brief 


featured extensions, a top five and a 
newest five. But head straight for the 
Browse Extensions dropdown menu at 
the top of the page and you'll find ina 
well-ordered range of different 
categories, boasting some 87 
extensions in all at the time of writing. 
And that’s rapidly increasing. 


Download and install 


The categories available include 
Accessibility, App Servers, Browsers, 
Generator Objects, Generator Template, 
Learning, Navigation, Productivity, 
Rich Media, Scripting, Style/Format, 
Text and eCommerce. Choose one 
and you'll come to a list of extensions. 
Each entry shows an author, date, 
version, user rating, number of 
downloads, and, importantly, the level 
of official approval Macromedia has 
given the extension. 

Click an extension for a more 
in-depth explanation of what it does 
and how it works — Smartclips for a 
Mac OS-style interface, ActionScripts 
for a bouncing ball, or an XML 
newsfeed, to name but a few. There's 
also more detailed information about 
the download — size, installation 
instructions and so on — and, should 
you feel the need to talk, a space where 
you can read and post messages about 
the extension. 


Get going 


Once you've downloaded your new 
extension, all you need to do is click the 
file, which will have the extension .mxp, 
and your Extension Manager will deal 
with the rest, as well as providing some 
instructions about how to use your 
add-on. These will vary depending on 
the nature of its features. Graphical 


elements and interactive clips, for 
instance, often appear in your 
Help>Samples or Window>Common 
Libraries menu. You can access 
Publishing Templates via File>Publish 
Settings, while ActionScript may be 
stored in the Actionscript folder within 
your Flash application folder. 

Many extensions offer a diverse 
range of customisable features, which 
you can often access using your 
Window>Panels>Clip Parameters 
panel. Other clips include detailed 
instructions on how you can edit the 
clip itself to get the very results you are 
looking for. Experimentation here is 
the key. 

You can, of course, create your own 
extensions: you don't need any special 
software, apart from the Extension 
Manager. After checking out our 
essential selection, why not do the 
tutorial on page 76 which explains how 
you can make your own? > 


nedia Extension Manager 


ee Pee * 


ay OOULYOX] 
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Categories available include Accessibility, 
App Servers, Browsers, Generator Objects, 
Learning and Navigation to name a few. 


hese files are offered as a way to help new users quickly package extensions. ‘Simply follow the comments in these 


ple MX! files and insest the comect data for your own item. 


hese samples wil be installed into the Flash 5>MXI samples folder. 


Click an Extension for a more in-depth explanation of what it does and how it works. 


Status Bar Message 
Category: Browsers 
Author: Matt Wobensmith 


This Publishing Template uses 
JavaScript to set the message in the 
browser status bar when your user 
interacts with buttons - say on 
rollover. It’s useful because one of 
Flash’s inherent weaknesses is that 
it doesn't automatically show where 
a link is going to. 


ToolTip SmartClip 
Category: Productivity 
Author: Branden Hall 


Tooltips, where a subtle pop-up 
message tells you a little bit more 
about what you're about to do, are 
one of the greatest inventions in the 
history of interface design. This 
Smartclip gives you a drag-and- 
drop tooltip which you can 
customise, including colours, 


shadows and more. 


Bounce 
Category: Scripting 
Author: Matt Wobensmith 


A fun ActionScript sample which 
outputs in just a few KB, so you can 
use it to occupy visitors while your 
site loads. In short, it adds an 
interactive bouncing ball to your 
Flash movie, which the user can pick 
up, drag about and release. The 
motion is based on the physics of 
gravity and collision. 


Frame counter 
Category: Productivity 
Author: Streamline Design 


A useful clip while you're 
developing movies, or indeed if you 
want to make your user aware of the 
technology as a creative feature. 
This clip shows which frame of the 
movie you are on during playback, 
and has buttons for jumping 
forwards and back, and more... 


Sample MXI files 
Category: Learning 
Author: Matt Wobensmith 


Looking to create your own Flash 
extensions? After reading our 
tutorial over the next few pages on 
how to make your own, download 
these sample files designed to help 
new users quickly package their 
own extension and discover more 


about what you can do. 
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Making extensions 


Razorfish show you how to make the most of this new feature... 


Part 1: Boundaries and directions 


Setting boundaries for our bubbles using Flash's collision detection code 


| 


| 


ielefle 


Start with a new movie, and create a round 

symbol on the stage. Convert this to a Movie 
Clip. This will be your single asset, because it'll be 
dynamically duplicated to create bubbles. 


There are two main sections to the code that 
appears here. The first is the onClipEvent 
(load) statement, which runs when the Movie Clip is 
initialised, the other is the onClipEvent(enterFrame) 
which executes every time the playhead enters a 
frame. Even ina one-frame movie like this one, the 
playhead still enters that frame repeatedly and the 
script executes repeatedly. 


With all the Movie Clips now in the ballArray, 
loop through it and check that the Movie Clip 


| 2 | Create a keyframe on a layer called ‘actions’ 
and add this code. This initialises an empty 
array in which to store your bubbles. Use the ‘for’ 
loop to loop through the same number of times as 
the variable ‘ball_count’, each time duplicating the 
Movie Clip ‘ball’ and setting its x and y values to a 
random number. 


In the first section, we are merely initialising 

variables that we will use in the other part of 
the script, including the boundary for where the 
bubbles can go, and the starting x and y directions. 
in the final line we use the ‘push’ command to add 
‘this’ (the current Movie Clip) to the ballArray. 


5: 
ce 
i 
ie 
b 
| 


8 | Then check whether you are actually 
colliding with this Movie Clip by performing 


3 | Put a Stop command in to finish the code once 
your bubbles have been created. This code 
runs when the movie is first started, and isn't used 
again. Now click on ‘ball’ and open the Actions 
panel to check out the code it’s using to do the 
collision detection. 


Tull 


iii 


In the second section, find the script 

that actually performs the collision detection 
using the new hitTest property found in Flash 5. 
With this method a Movie Clip can test whether it is 
hitting another object. 


9 | At the end of the script, check whether the x 
and y values of ‘this’ Movie Clip have put the 
bubble outside of the boundaries set in the variables 
declared earlier, and if they are then use the 
Math.random function again to change direction. 


currently in the array loop isn't the Movie Clip that 
is checking. This is because we only want to deal 
with the Movie Clips we can hit or be hit by (we 
obviously can't be hit by ourselves). 


a hitTest against it. If you are, you can then 
change the direction of ‘this' Movie Clip using the 
Math.random function, and adding these numbers 
to the x and y values. 
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ay There you have a very simple and relatively 
unsophisticated version of collision detection 
in Flash 5. This is only the first part in making an 
Extension however. 


names"collision” 
versions" 1.0" 
type="sample"> 


kproducts> 
«product nemes"flash" version="S" primary="true™ /> 


AICOATA [this is 2 simple collision detection routing 


In Macromedia's XML format, the purpose is 

to allow for the exchange and easy installation 
and use of particular ‘objects’ created by end users 
or third party vendors. They are managed by the 
Extensions Manager, which you will need to 
download from the Macromedia Website and install 
before you attempt to install or create an Extension. 


/<macromedia-extension 
name=“collision” 
versione” 1.0" 
type="sampie"> 


|<products> 


«product name="flash" version="S" primary="true” /> 
</products> 


descriptions 


<ICOATA [this is a simple collision detection routine Jb 
}</description> 


j<ul-access> 
<SICDATA [this goes in the flashS>samples folder I> 


& ‘Author name’ is the next category, which is 
self-explanatory. Next is ‘description’ and 
‘ui-access’ which explains where in the Flash 
directory structure the files can be found. 


Part 2: Creating an XML document 


Download the Extensions Manager, then start a new movie using a Smartclip 


icmacromedia-extension 
hame="collision” 
versions"1,0° 
type="sample"> 


2 | The next step, once you've saved your work, is 


to fire up your favourite Text Editor and start 
creating the XML document that will provide the 
information to make the Extension package. 


name="collision” 
version="1,0" 
types"sampie"> 
|<products> 
<product names"flash’ version="5" primary="true” /> 
</products> 


|eauthor name="damon* /> 
description’ 

AICDATA [this is # simple collision detection routine Il> 
|</oescription> 


jcul-access> 
A ICDATA [this goes in the fleshS>sampies folder I> 


G The XML format consists of various tags, the 
first being ‘macromedia-extension’ which 
defines the name of the Extension, the version 
number and the type it is. 


|cmacromedia-extension 
name="collision” 
version="1.0° 
type="sampie"> 


<products> 
<product name="flash” version="S primary="true* /> 


AICOATA [this Is 2 simple collision detection routine Ib 


</description> 


jcui~access> 
AICDATA [this goes in the fiashS>sampies folder Ib 
jcul-access> I 


/</macromedia-extension> 


The final tag is ‘files’ which simply tells 
the names of the files that you are using 
in your Extension. 


cmacromedia~extension 
name="collision” 


The format of an XML document is quite 

similar to HTML. It uses the same type of 
‘tagging up’ system and can use the same tags if 
necessary. However the most important difference 
is that XML uses tags that aren't fixed like HTML, 
but are defined by their creator in order to 
accomplish a particular purpose. 


|cmacromedia-extension 
nammes"collision” 
version="1.0" 
type="sampie"> 


|cdescription> 
AICDATA [this is @ simple collision detection routine j}> 
</description> 


cui~access> 
<HICDATA [this goes In the flashS>samples folder Ib 


6 | Next is ‘products’, which defines what 


Macromedia product this file can be used in, as 
Extensions are available for Dreamweaver, UltraDev 


and Fireworks, as well as Flash. 


information, we can launch the Extension 
Manager and begin the packaging process. 


Flash Special 
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10} In the Extension Manager, go to Package 
Extension in the File menu. It will ask for an 
-mxi file. Once found, it will then save it an .mxp file 
which represents the whole package, containing the 
source files as well as the .mxi. 


13 | For two of the options, we will be using a 
Smartclip as these have fixed values: the 
‘product version’ box and the ‘primary’. The 
Smartclip is the dropdown menu, found in 
Window>Common Libraries>Smartclips. 


Go to the Object Actions for the Smartclip 
and create a function called onMenu with 
the parameters ‘item’ and ‘label’. We're particularly 
interested in the label because it contains the 
text of the product name. 


| Macromedia hasn't provided an interface 
for the creation of the necessary XML 
files, so that’s what we will do in the second 
part of this tutorial. Let's go back to Flash and 
start a new movie. 


14 | Drag it on to the stage and go to the Clip 


Parameters panel. The first thing to do is set 


the values in the Items Array. Double-click on 
(Array[]) in the Values column. This brings up a 


dialog box, which lists default values. Replace these 


with the product names listed above. 


On the next line all we need to do is set a 

variable that equals the value of the variable 
label. This is enough to have assigned the value to 
our variable, which we will use later on. 


Start creating a set of form elements based on 

the categories mentioned above. Set the 
variable name of each of the input boxes to 
something you'll remember, because you'll be using 
these variables later when building the XML object. 


G You now have a list of useful items but you'll 
need to capture the name of the item the user 
has selected. To do this, look in the Clip Parameters 
box again. The description explains (very obscurely) 
that you need to create a Clip Handler function 
called onMenu to activate the menu. 


For ‘description’ and ‘ui-access’, use a 

multiline input box so all information can be 
contained. These two are special cases, because we 
need to add some characters to the start and end of 
the user-inputted information. Create a variable on 
an Actions layer on the main timeline called 
descHead and give it the above value. 


If you haven't already created a submit 
button, do so and set a variable called 
desc2. Make the value as the picture above. This 
gives the necessary code required by the .mxi file. 

Do the same for ‘ui-access’. 


Part 3: Elements and nodes 


Setting up attributes for the Macromedia Extension 


t{ift 


— 


In your submit, put code to go to a frame 

number or label of your choice. Put a 
keyframe here and create a blank Movie Clip. 
This is where we'll put XML code using an 
onClipevent(load) handler. 


The next step is to create your first element, 

which is the Macromedia Extension tag. This 
tag contains the rest of the elements in the file, 
much like the <html> tag in HTML. All other 
elements must therefore be appended to this as 
children elements. 


Some elements, such as ‘product’, will be 


appended not to macromedia-extension 
but to elements directly above them. Simply 
referencing the appropriate element instead of 
macromedia-extension does this. 


Before we do this, we must set attributes for 

the macromedia-extension element. These 
attributes correspond to the Extension name, 
version and type. These values correspond to the 
values taken from the input boxes. Remember to 
put the path in to avoid problems later. 


8 | The ‘description’ and ‘ui-access’ fields are 
exceptional in that their tags contain the 
actual data taken from the input boxes. Therefore 
you need to set the name of the element created to 
the variable set on the submit button. When this is 
completed, you can view your output by tracing the 
toString() command which will list all the data 
within your XML object. 


> ter = ER Some emcee ee 


_— = ==—- 


wr aw 


gy The first step is to create a new XML object. Do 
this with the new XML() command. This 
creates an empty XML object that will enable you to 
create the elements and nodes of the XML tree. 


Create the next element as above but this time 

use the appendChild method to attach this 
element under the macromedia-extension element. 
This means that when you view your output, you'll 
see that this element is encapsulated inside the 
macromedia-extension element. 


The next would be to use the .send() command 

to push the data to a server which could then 
turn the tree into an actual file. At the moment this 
is not possible, so we would have to send it outside. 
With ASP or some similar server side technology, 
this should be no problem. There you have it. Two 
simple but hopefully useful examples of how (and 
why) to use Flash's new Extension features. For 
more examples see go to www.macromedia. 
com/exchange/flash. EE) 
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Flash Special 


Fanatical Flash gurus provide some of the best views on the Web, not to mention tips and 
resources for the eager disciple. Here's a snapshot of the inspirational stuff out there... 


Praystation 

www. praystation.com 

Joshua Davis presents a research and development 
Website with a mix of instructive and enigmatic 
projects, often spanning an entire month with a step 
each day. A sliding, calendar-style nav bar showcases 
all manner of Flash oddities and keeps you up-to-date 
on developer conferences and events of interest to the 
budding multimedia designer. 


Flash Challenge 


www.flashchallenge.com 

Arenowned cutting-edge Flash showcase site that pits 
ten sites against each other and analyses them by 
categories such as interface, aesthetics and 
optimisation. There’s constructive feedback on offer 
from its style-conscious community — a good place to 
head if you're in need of divine design inspiration. 


Bigimpact 

www.bigimpact.bizland.com 

As featured in the JavaScript tutorial on page 60, this 
site is built with innovative touches using the 
JavaScript Integration Kit for Flash 5, such as zooming 
in to see more detail. The 3D models were animated 
using the Vecta 3D standalone, making the file size for 
the entire site a nifty 9OKB. 


Devlab 3D 


devlab.swift3d.com/ 
If you've ever needed convincing about the potential of 
vector-based 3D graphics on the Web, visit the Devlab 


World design domination — it’s a question of when rather than if 
for WDDG, whose corporate site has a plentiful portfolio. 


for a dose of medicine courtesy of Electric Rain's Swift 
3D, a 3D vector exporter for Flash and Live Motion. 
Powerful, cinematic design and technical wizardry 
combine to give Flash serious 3D credentials. 


WDDG 


www.wddg.com 

A portfolio with a difference, the ‘super video pimps’ at 
World Domination Design Group (WDDG) manage to 
be both brash and understated at the same time. A 
portfolio of past Flash projects will appeal to corporate 
and design-minded viewers. Speedy downloads and an 
extremely slick interface complete the picture. 


Flash Kit 


www.flashkit.com 

110,000+ members can't be wrong, and the briefest of 
snoops around Flash Kit reveals what is possibly the 
Web's most valuable Flash emporium. Flash Kit offers 
online tutorials, endless games, open source movies, 
fonts and resources galore, not to mention links and a 
thriving discussion community. 


Macromedia 


www.macromedia.com 

Enrol in the online Flash Uni, check the support section 
for useful Q&A info and get down to the nuts and bolts 
of design with the ‘developer showcase’ section. The 
Site of the Day is still one of the most coveted 
accolades on the Web. 


Submethod 

www.submethod.com 

“Do not drift aimlessly from one aimless collection of 
aimlessness to another,” the creators of Submethod 


Navigate the Artificial Environment shorts circuit, and they'll 
even email you when they've produced a new one — lovely. 


advise. Instead, spend some quality time admiring the 
site’s interactive TV experimentation with Flash-based 
fashion-shoot-with-a-twist output. Only occasionally 
pretentious, there's some innovative photography and 
print-based design inspiration here. 


Artificial Environments 


www.ae-shorts.com 

Shorts are often used by design agencies as breeding 
grounds for new ideas, which is the exact scenario with 
London's Artificial Environments site. Expect plenty of 
interactivity and motion graphics, as well as some 
impressive interface work and an elegant look and feel. 


Supermodified 


www.amontobin.com/index2.html 

Amon Tobin's Website is much less gimmicky than 
others of this ilk. Apart from providing key-operated 
loops and samples straight from the source, the site is 
also a futuristic riot of typographic Flash trickery that 
complements the Brazilian musician's hectic and 
eclectic leanings perfectly. 


azartmedia Flash Lab 


http://az2.co.uk 

The minds behind the Flash lab approach their new 
media from a fine art background, and the site has the 
ambience of an art gallery, with experimental, arty eye 
candy waiting to be discovered. A refreshingly 
corporate-free zone. 


Mumbleboy 


www.milkyelephant.com 
Mumbleboy may be familiar to many, but surely only 
truly makes sense to a select few. It’s an explosion ina 


Bricolage, permutation and modifications collide to create 
stylish sights and interactive sounds for Amon Tobin. 


SFM 
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styles and comes out with something entirely its own. 
Check out the animation in Anonyme Elektronica for a 
strange fusion of visuals that can only really be 
described as watercolour graffiti, and have a delve 
around for other subtle Flash treats. 


Motion 2000 


www.motion2k.com 

Motion 2K is a solid rather than stimulating tutorial site 
that’s worth having a look at if you’ve done the rounds 
and still can't get your vectors to play along. Help is at 
hand on almost every imaginable topic, and the site 
also promises to point you in the right direction for 
buying discount books, as well as offering loops and 
resources of its own. 


Flash Forward 2000 awarded the Nine Point Five Collective the 
Best Sound award for its work on the arty Submethod site. 


Immerse yourself in the breakbeat and hip-hop fuelled musical 
and visual experimentalism of Germany's Rabatz Underground. 


Flash factory: a prolifically-updated conveyer belt of 
deeply disturbed kitsch, saturated in lo-fi Eurotrash | Protocol 7 
and retro gaming imagery. Truly unique. 
www.protocol7.com 

Protocol 7 is one of a new breed of Flash sites aimed 
at the deadline-conscious designer. Essentially a 
catalogue of diverting navigation and aesthetic ideas, 
Protocol 7 also gives you the option to download the 
source code for select examples, at the very least 
offering food for thought and at best, saving your skin. 


Xonetik 


www.xonetik.com/ 

Beneath the garish exterior, peculiar Cubist logos 
and incredibly annoying character that follows 

the mouse cursor for no reason, Xonetik nonetheless 
manages to promise much. Tutorials, a toolkit and 

a design showcase are but a few of the treats in 
store, and if the techniques are anything like as 
elaborate as the site design, Xonetik will be worth 
keeping an eye on. 


Once Upon a Forest 


www.once-upon-a-forest.com 

‘925 feet and fighting limestone daisies’ might not be a 
title to solve the problems of the world, andinany case | 
Once Upon A Forest isn't there to offer advice. Instead, 

it’s an exhibition of creative animations and screen 
designs from Praystation designer Joshua Davis. Art | 
history references abound: straying from the path might | 
produce some hauntingly familiar imagery. 


Virtual FX 


www.virtual-fx.net 

If you're after tutorials and tips, one of your first 
destinations should be the Virtual FX site. Don't be 
fooled by its placid, humble exterior - the site is a true 
network, with thriving message boards, plenty of open 
source files and high-quality tutorials covering expert 
ActionScripting techniques and games programming 
tips, alongside step-by-steps from the experts. 


Action Scripts 


www.actionscripts.org 

A handy site to visit if you’re keen on exploring Flash's 
inner clockwork, over 100 downloadable open source 
files lie in wait to mess with your head. The tutorials 
cover topics such as Flash detection scripts, video to 
vector conversion and the ins and outs of tsunami 
building for the more dedicated disciple. 


Konstruktiv 


konstruktiv.net/main 

A portfolio site demonstrating the motion, design and 
artwork of Vancouver Film School graduate Matt 
Anderson. The collection on show is distinguished by 
its uninhibited use of futuristic colour schemes, 
biomechanical forms and tactile industrial textures. 
The Ogment site environment where ‘the machines are 
thinking’ uses Flash with particular elegance. 


Uncontrol Flash Guru 
H69 www.uncontrol.com www.flashguru.co.uk 
www.h69.net Spooky vector life forms crawl across the face of For a bit of inside info, you might want to scroll through 


The interface to H69 is a minimalist’s dream, and its 
simplicity is the perfect prelude to the games and 
diversions on offer here. Because Flash doodles of this 
kind are increasingly two-a-penny they need some 
flash of brilliance to justify the downloads. H69 more 
than manages this, and thanks to some cryptic titling 
you can never be entirely sure what’s coming up next. 


Uncontrol, a Web experiment designed to express 
themes of anthropomorphism and kinetics using 
simple shapes. You'll undoubtedly be familiar with this 
kind of scripting, but the butterfly wing colour | 
schemes, insectoid creations and Spirograph-like 

sketch tools add resonance, and character, to the genre. 


the interview section of Flash Guru, where designers 
give the lowdown on their masterpieces. Alternatively, 
there's an impressive links section which offers a more 
rounded view of the Flash world, or you could check out 
the Focus category for a look at the implications of the 
latest Flash design developments. EES 


Rabatz Underground 


www.rabatz.de 
Flash provides the wallpaper for Rabatz, a hardcore 


Flash resources 


teutonic design site which assimilates plenty of cool 


The ‘Konstruktiv politburo’ is currently in chrysalis mode, but 
check out v1.0 in the meantime for intriguing Flash-work. 


If you're looking for help with Flash, you'd think the Web 
would be teeming with answers - Flash is everywhere, after 
all. The truth is, although help is at hand if you're prepared to 
search for it, and shortcuts in the form of source code can be 
downloaded from many places, ultimately the best resource 


is simply to visit the sites themselves for inspiration. 


Flash Challenge [www¢lashchallenge.com] prizes subtle 


and sophisticated design over technique, with sites being 
judged according to design criteria that have very little to do 
with Flash pyrotechnics and much more to do with elegance, 
usability and style. 

A host of developer sites dedicated to pushing back 
the boundaries of Flash design and exploring new 


techniques and technologies, such as [w] www.lazoom.com 


and [w] www.flashmove.com are also handy if you want an 
honest and expert appraisal of a work-in-progress. 

But if you’re wrestling with a problem and you can't find 
the answer in one of those overpriced but almost essential 
books on the subject, then online tutorials are your next stop. 
[w] wwwlashkit.com is a tried and trusted resource offering 
tutorials across the range, as is [w] www.virtual-fx.net. 

If all else fails, posting to messageboards is always worth 
considering, but not before you've had a look at the message 
archives - chances are some other lost soul has had to deal 
with the same problem in the past. 

As ever, the Macromedia site [w] www.macromedia.com 
merits further exploration and has a section full of approved 


Extensions sent in by users for you to download. 
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Text effects with SWiSH 


Take a break from ActionScripting by adding 
actions, pictures and sound in SWiSH and 
then incorporating the movie into Flash 


ou Can create some great 
effects in Flash, but do you 
have the patience to set up all 
the ActionScripting 
necessary to create more complex 
effects? Don't worry if scripting isn't your 
favourite pastime. SWiSH has been 
created to save you the bother. 

With a few clicks of the mouse button, 
text can be made to explode, be squeezed 
into place, or appear as though it’s being 
typed ona typewriter - as well as skewed 
in more than 14 other ways. At the same 
time you can add pictures and sounds to 
movies and set up actions. Then the file 


| 


f 


can be exported, opened in Flash, and 
added to your main movie. 

If you want to try before you buy, 
SWiSH can be downloaded for free from 
www.swishzone.com. It is a demo version 
and the text is scrambled when movies are 
exported or previewed in the browser. 
This can be avoided by purchasing the 
software (you will still need to download 
the demo first) — just select Purchase 
from the Purchase menu and note the 
machine number that appears. Once the 
transaction is complete, you'll receive a 
registration number: add this to the 
purchase dialog box and you’re away. 


Illustration: Kerry Roper designer/typographer [t] 07976 7744820 [w] wwwyouarebeautiful.co.uk 


Part 1: Adding a text effect using SWiSH 


First of all we will show you how to create and adjust a text effect in SWiSH 


Sound effects 


When deciding which text effects 
to use, build them up to create a 
dramatic effect. Add sound to 
enhance the effect and also use 
animated shapes and images 
alongside the text once it’s been 
added to the Flash movie. 


Once SWiSH is launched, the first thing to do 

is to set the size, background colour and frame 
rate of your movie under the General tab. You can 
go back and adjust this later if you change your 
mind about the settings. You can also re-size the 
movie by clicking and dragging the movie window. 


4 | Once you have finished, click the Timeline tab. 
If you're used to Flash you may find it 
confusing that there isn't a keyframe displayed in 
the Timeline despite the text being in the movie. 
Don't worry — the keyframes appear once you have 
applied the effect. Choose the Vortex effect from 
the Add Effect list. 


CREATING A WAVE 


Use the mid-point setting to describe the 

arc the letters will follow before they come 
to rest. Rotation Order/Angles determines how 
the letters rotate as they move into place. Then 
you can choose how the letters will cascade after 
one another. 


Then click the Timeline tab and choose 
Modify>Insert Text or click the Insert Text 
button on the toolbar across the top. The word ‘text’ 
appears in the movie. Either double-click it, or click 

the Text tab and type in the text you want. 


CREATING A WAVE 


a A dialog box appears with all the adjustments 
that can be made to the Vortex effect. To 
start with, click Preview to get some idea of the 
effect with the default settings. You can then 
choose how long you want the effect to last by 
changing the number of frames. 


Before clicking OK, sneak another preview 

to check that the effect is what you want. A 
bar will appear in the Timeline with the name of the 
effect. The layer is given the name of the text since 
each piece of text goes on its own layer. 


There are various options you can use to 

stylise the text. The font, size, style, colour, 
kerning (which is really letter spacing) and leading 
can all be altered. Any changes are reflected in the 


text in the movie. 


CREATING A WAVE 


G You can also change what size the letters are 
when they first appear and what size they are 
when finally in place. Also, choose whether to have 
them fading in by adjusting the Alpha value of 
when they first appear. Changing the Gravitation 
Point adjusts where the letters first appear. 


CREATING A WAVE 


9 | If you want to make changes to the effect, 
double-click the bar in the timeline and the 
dialog box with all the options will appear. To 
change what the text says, go to the Text tab and 
adjust it there. > 
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Part 2: Adding other effects to your SWiSH movie 


Now you have created one effect, you are ready to add more, both to the text already 
created and to other text. You will need the sound file ‘Flourish.wav’ from the CD 


Fancy fontwork 


If you have used some fancy fonts 


CREATING A WAVE 


(in other words, any other than 


the standard Arial or Times), 


bear in mind that including the 
fonts as part of the Flash SWF file 
will considerably increase its 
size. In SWiSH, you can ensure 
the text is exported as Shapes by 
checking the Export as Shapes 
checkbox under the Text tab. That 
avoids the need for the font. 


1 | SWISH can only display one effect at a iz] The dialog box appears so you can set up your You can also choose whether you want the 

time but you can add a follow-on effect wave. To create a slower, longer wave, wave to move forward through the word or 
to the text. Click in the timeline where the text is increase the period of the wave and the number of backwards. And decide whether you want the 
(click on the Effect bar that has appeared there) frames it is going to last for. Adjustments to the movement to go up and down or from side to side. 
and choose Add Effect. We are going to add the number of pixels it moves by will make the wave As you are making the changes, keep clicking 
Wave effect. more, or less, dramatic. Preview to check the effect. 


CREATING A WAVE 


Go Now to add some other text. Either click the 


4 | Click OK once you're happy with the effect 5 | The movie will probably loop (depending Insert Text button on the toolbar or go to 

and another bar will appear in the timeline on whether the ‘Loop preview animation’ Modify and select Insert Text. Double-click the text 
after the first bar. It is named Wave so you know it box under the General tab is checked or not). that appears on the stage or click the Text tab and 
represents that effect. Preview the whole movie by To stop it, click the Stop tab or go to the Control type in the text you want. Also change the 
clicking on the black Play arrow in the toolbar. menu and click Stop. formatting options. 


CREATING A WAVE CREATING A WAVE 
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OW fOR A BLU 


Then switch to the Timeline tab and choose 
Add Effect. We are going to use Blur for this 8 | Click OK and the Effect bar will appear in 


9 | Now to create a flourish, we are going to 
add a sound to herald the Wave effect. 


text. In the dialog box, choose how many frames the timeline. We want the blur to start after Click the Content tab and click Import. You can 
the effect will last for, the type of blur and its the Vortex effect of the first text. Click the bar and import sounds and images (click the Files of 
direction. Also adjust the Blur amount and how drag it along the timeline until it starts in the same Type dropdown menu at the bottom of the dialog 
much the text is scaled as it blurs. place as the Wave effect applied to the other text. box to see which formats). 


Flash Special 


_ 


AERPs 


Choose the file ‘Flourish.wav' from the CD 

and click Open. Then click Add to Scene and 
an action displayed as an ‘a’ will appear in the 
timeline. The action instructs Flash to play the sound 
in the frame it appears. 


The action has appeared in its own timeline 

and can be dragged into position so it 
corresponds with the start of the Wave effect. Then 
play the movie to see how you like the effects. 
Notice that the sound only plays once. 


If you want the sound to loop, double-click 

the ‘a’ in the timeline and you will see the 
details of the action. Select the sound in the 
right-hand column and click Options at the 
bottom. You can specify how many times you want 
the sound to loop. 


Part 3: From SWiSH to Flash 


Now you are ready to export your SWiSH movie and incorporate it into a Flash movie 


Sound off 


When you import the SWF file, 
the sound may not be playing. In 
which case import the sound into 
Flash and edit the Movie Clip 
symbol using the Sound panel so 
that the sound is added to the 
appropriate keyframe. 


CREATING A WAVE 
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Then choose Export to SWF from the 

File menu, choose the file name and where 
to save it. Now you are ready to open Flash and 
import your SWF movie. Once Flash has opened, go 
to Insert Symbol. Name it and choose Movie Clip 
before clicking OK. 


First save the movie as a SWiSH movie so you 

can return to it and modify the effects if 
necessary. Go to the File menu and click Save As. 
Name the file and choose where to save it. (Notice it 
has the extension .swi.) 


* i lu _ see 

Eg Coto Control and Test Movie (Flash won't 
play Movie Clip symbols when you just choose 

Play or hit Return). It is likely that your Movie Clip 

symbol needs moving so that it appears in the 

right place on the stage. Close the Test Movie 

window, select it and move it. 


G Return to your main movie by clicking Scene 1 
at the top of the window and display the 
Library from the Window menu. Drag the Movie 
Clip symbol onto the stage. You will find it tricky to 
position, since all you will see is the first letter. 


Go to the File menu and click Import. Choose 
the SWF movie exported from SWiSH and click 
Open. The SWF movie appears as a series of 
keyframes representing each movement in the 
Text effect. That is why we have imported it 
as a Movie Clip symbol. 


CREATING A WAVE 
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G You are now ready to add other elements 
to your movie. If you want to change the 
Text effects simply return to SWiSH and open the 
original (.swi) file. You will have to re-export the 
SWF movie and re-import it into the Movie Clip 
symbol (delete the keyframes from the original 
before re-importing it). Have fun! FEES) 
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Giving LiveMotion 


dimension 


LiveMotion is hooking Web designers and 
animators alike. We push the package further 
with the implementation of 3D vector and 
bitmap graphics to complement fluid navigation 


iveMotion, launched almost a 
year ago, has fast become a 
powerful ally in the Web 
designer’s selection of funky 
and trustworthy software packages to deal 
with today’s demanding and individual 
Web creation projects. It is well-known for 
its excellent animation techniques and 


easy creation of rollovers and timeline 
management, but its real power lies in the 
integration of elements from other 
packages, Adobe and non-Adobe. This 
tutorial will show you how to mix vector 
and bitmap 3D images into your SWF 
animation, and make your site more 
compelling and interesting to navigate. > 


Illustration: Matthew Harvey 


Part 1: Setting up our site 


First, we are going to prepare some basic elements to ground our 
Website, using LiveMotion shapes and ///ustrator vector graphics 


X andY 


Set the Width and Height of the 
shape before setting its X and ¥ 
values. When scaling an object, 
LiveMotion measures from that 
object's centre point. When 
positioning, it measures from the 
shape’s top left! Just something 
to get used to... 


Opacity palette 


This has two options - Object 
and Layer Opacity. The Layer 
Opacity controls the 
transparency of a particular 
layer on a multi-layered object. 
Object Opacity changes all the 
layers at the same time, and is 
mainly used for animated fades 
and rollovers. 


Create a new file using a 16:9 widescreen 
resolution of 500x280 pixels. We'll keep the 
frame rate to 15fps for this project, because most 
of the animation is vector-based which will make 
playback very smooth. When done, change the 
duration of the file to four seconds. 


Li 

Choose the rectangle shape just drawn, 

go to the Edit menu and choose Duplicate. 
Then go to the Properties palette, set it to Outline, 
and choose a thickness of 6 or 8 pixels. Note 
that this now changes the size of the layer, so you'll 
need to reset it to 500x280 at 0,0 by using the 
Transform palette again. 


Let's do the same with the logo's tag line. 

Import the ‘DesignLine.ai’ file, name it, fill it 
with white, add a layer in black for the shadow, 
soften it, and position the line beneath the main 
logo at the top. 


Choose the Rectangle tool (m) and draw a 
shape roughly the size of the work area. Then, 
go to the Gradient palette and choose Linear. Using 
the Color palette, change the colour of the both 
ends of the blend by selecting the small swatches. 
Finally, turn the Blend to 90°. 


5 | Now you can import the ///ustrator graphics 
and style them up a little. Go to the File menu 
and choose Place. Locate the file ‘Logo.ai’ and 
bring it into your file. Position the logo towards the 
top of the screen, then go to the Timeline window 
and hit Return. Rename the layer ‘Logo’ or 
something easy to recognise. 


{I 
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We need to construct some elements in the 

backdrop, ready to create a 3D feel. Import the 
file called ‘BlankBox1.ai’, position it so it lines up on 
the left of the file, and fill it with white. To change 
its layer order, go to the Object menu>Arrange> 
Send to Back. Then, go to the same menu and 
choose Bring Forward. Finally, change the Object 
Opacity to 30 per cent. 


Now, use the Transform palette to scale the 

box to 500x280 pixels, and position it at 0 on 
the X and Y axes. We can now create a border 
around the whole animation using this shape. 


G Let's pull the logo out a bit from the page 
with a shadow. Go to the Object Layers 
palette, and click the New Layer icon at the bottom. 
Double-click the layers to name them. Now, with 
the new layer selected, go to the Layer palette, and 
offset the shadow downwards about 8 pixels, 
softening it slightly, and maybe changing the Layer 
Opacity in the Opacity palette to about 40 per cent. 


9 | Finally, we need a black bordered box to fit on 
top. Duplicate this layer (Edit>Duplicate), 
change the Properties to Outline, choose 3 pixels 
Width, and change the Color to Black. Remember to 
set the Opacity to 100 per cent again. We are now 
ready to add text, rollovers and 3D animation! > 
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Part 2: Rollover text, interaction and playback control 


We need to make some interactive text rollovers, but also control the 


playback of the file so we can add interactive animation further down the line 


Setting markers 


This marker and timeline strategy 


is almost identical to 
Macromedia Director, You can 
set different markers anywhere 
on the timeline, and use buttons 
to navigate between them. 
Remember to add Stop 
behaviours at the end of each 
section, otherwise one click to 
Section 2 will play all the way 
through to Section 50! 


Drag then Shift 


Remember to hold Shift AFTER 
you start dragging to constrain 
the movement to the X axis. 
Holding Shift first will deselect 
the layer - one of the mistakes 
most commonly made by 
beginners. 


Using the Text tool (t), create a small line of 
type on the page. Here, we've have used Rotis 
Semi Sans Extra Bold, ranged left at 8pt, with 
Tracking set to 30 to open up the antialiasing a little. 
We'll animate the tracking for the rollovers, making 
it easy to create interesting effects with little effort. 


4 | Click the stopwatch for Tracking, move the 
Current Time to 3 frames, then double-click 
the type in the main screen to access the options — 
set Tracking to 80. Click OK, then drag the Time 
Marker back and forth: the Tracking will now 
animate. To now set the Tracking back to 30 at 9 
frames, hold down Option/Alt and drag the first 
keyframe to the 9 frame mark. 


Select your Text Group again (hitting Return to 

name it), add another State in the Rollover 
palette, for a ‘down’ state. With that state selected, 
hit the Behaviour button in the Rollover palette, and 
set a two-action command. First, choose Go To 
Label, and set Composition and Section 1 as Targets. 
Then, add a Play command and choose 
Composition. This ensures it all works. Again, hit Q 
to preview these commands. 


With the Pen tool (p), draw a short straight 

line, in black. Use the Cursor tool (v) to select 
them both, go to the Object menu and choose 
Group. This enables us to do rollovers to both items 
at the same time. Position this group on the left line 
of the box, somewhere towards the bottom. 


If you close all the twirled options, go to the 

top of the Timeline window and choose 
Composition from the menu: preview your file to 
see it works. Just hit Q on the keyboard and try it! 
You'll notice that the animation plays to four 
seconds. We need to stop it so we can add more 
sections. At 0 seconds, click the Behaviour tab in the 
timeline, add a Stop behaviour for the Composition, 
and name it Stop — it may come in handy. 


Now let's throw in some 3D! Move the 

Current Time to Section 1, go to the 
File Menu>Place Sequence, and choose ‘HomeBox- 
0001' from the Home Box Animation folder on the 
CD. Then check that the imported sequence sits 
exactly over the black border already there — which 
we now need to trim out to disappear from Section 
1 onwards. Drag the right side of the Border 1 layer 
to 1 frame before Section 1. 


In the Rollover palette, click the New Rollover 
State icon to make an ‘over’ state for this 
group. Double-click the new group to enter it, and 
make sure the ‘over’ state in the Rollover palette is 
still selected. Now, extend the layers to play for nine 
frames, and twirl down the Type layer's Options to 

show the Text Attributes. 


G Likewise, you can put another Behaviour 
in at 1 second, at the start of the new 
section, which you can access by clicking your 
word. Put the Behaviour in as Section 1, choose 
Play, and the Composition. If you don't choose 
Play, then LiveMotion will remember the Stop 
from before, with the result that the rollover will 
switch sections but with no motion! 


9 If you drag the Current Time past Section 1, 
you'll see that the Border Sequence stops 
moving at 2 seconds 4 frames. That is the focus 
point for all the effects which take place. So, fade 
out the White Backdrop Box from Section 1, twirl 
down that layer’s Transform Options and keyframe 
Opacity at Section 1. Then five frames later, change 
the Object Opacity to O per cent. You could also 
trim it out after this. 


In duplicate 


Remember that when keyframes, 
say for an Opacity fade, have 
been created at the start of a 
layer, and they are required again 
at the end, the quickest way is to 
duplicate them by dragging them 
with the Option/Alt key down. 
Copy the first keyframe to the 
end, and the second keyframe to 
before the end - no need to 
manually create keyframes all 
the time. 


As well as the box moving, the text also wants 


10) Five frames back from when the sequence to move across the screen for the duration of 
stops, fade in another box. Set the Current the sequence. So, twirl down the Text Group's 

Time to 1 second 14 frames, and import the Transform Options (this is in the Main Composition, 
‘BlankBox2.ai' file. Fill it with white, send it to the not inside the group itself!), and click the Position 


back then up one layer, position it 40 pixels on the X Stopwatch with the Current Time at Section 1. 
axis. Now do an Opacity animation from 0 per cent Move the Time to 2.04, then drag the Text Group 
to 30 per cent over five frames, ending at 2.04. Hit along to the right side of the screen, on the line 
Qand see a preview — now it's taking shape! where it want to be parked. 


gE 


Let's also import ‘TextFlip-0001' from the 3D 

Text folder on the CD. This layer only plays 14] Now animate a fade on this logo. From Section 
until 1.14, plus it is a little too small —let’s double its 1 for 2 frames, animate the Opacity from 0 per 
size to 1,000x560 in the Transform palette. It looks cent to around 40 per cent. Move the Current Time 


really fuzzy now: don't worry, it will render as to 1.11 to 1.14, fade again from 40 per cent down 
smooth vectors! Just as a sideline, these 3D vector to 0 per cent. Also, let's trim the layer off after that 
graphics were created using Swift3D from Electric point by dragging its end point back. This keeps the 
Rain@www.erain.com. timeline easier to understand! 


To get around this, twirl down the group's Now you can simply change the text content 
Transform Option and move the Time to the for that layer to make a new heading or 
second Position keyframe at 2.04, and again choice. Double-click the new Group to enter it, 
Shift-up arrow twice to move this keyframe up by select just the Text line in the timeline, go to the 
20 pixels. Now, position the layer left or right at main window and double-click on the type to open 
each keyframe to match up with the black the Options box. Select the text and change it. All 
background line it should sit on. Move the Current the keyframes and rollovers we have done are still 
Time marker to each keyframe to see the position. intact, just worded differently. 


The rest is mainly a cosmetic repetition of what 
we have covered here. We can add more 3D 
sequences, and duplicate the text to make other 
rollover groups. Go back to Section 1, and import 
the sequence ‘BoxThree-0001' from the Box Twirl 3 
Animation folder on the CD. It, too, plays until 2.04, 
so let's animate its Opacity to 3 frames along to 60 
per cent, and from 60 per cent to O per cent again 
between 2.01 and 2.04. Lastly, trim the layer. 


G Now we need to create some extra text groups 
for navigation to different sections. This is easy, 
because we have done all the work already! Select 
the Text Group layer in the timeline, and duplicate it 
(Apple/Ctrl+D). Making sure you are at Section 1 on 
the timeline, hold the Shift key and hit the up arrow 
on the keyboard twice to move this layer up 20 
pixels. Notice how its motion path is curved? 


Here's a neat trick to change the text wording. 
While in this Group window in the timeline, 
select the Text Group Comp icon at the top, choose 
the ‘over’ state from the Rollover palette, then 
select the text layer below. Twirl down all its 
Options, and keyframe as follows: From 0 to 3 
frames, Opacity from 0 per cent to 100 per cent. 
From 3 frames to 9 frames, Opacity back down to 0 
per cent. At 3 frames, keyframe Text under Object 
Attributes. At 4 frames, double-click the text and 
change the wording. Then preview and enjoy! > 
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Part 3: 3D rendered graphics and final output 


Now we can import rendered 3D graphics, with Alpha Channels, and have 
them loop playback. Then we'll export this file as our finished SWF 


Two options 


Remember that the Opacity 


palette has two options, one for 
individual layers, the other for the 


whole object and all of its 
subsequent layers! 


Object Settings 

If you create a set of Object 
Settings, the next item you 
choose to create them for will 
default to the values specified 
for the previous object. A nice 
little timesaver! 


Flash Special 


We want our 3D rendered animation (a 

rotating LiveMotion box in this example) to 
fade in along the timeline, but also self-rotate 
repeatedly. Move the Current Time to 2 seconds as 
a starting point. Ensure you have twirled up and 
come out of the Text Group Comp back to the Main 
Composition. Go to File>Place Sequence, and 
import ‘Live.001.tga’ from the Box Renders folder 
on the CD. Position it towards the left side of the 
design. Notice - perfect Alpha Channels! 


Now do the fade in for this animation when 

you click the button to take go to Section 1. 
Twirl down the box sequence group's Transform 
Options, and apply an Opacity fade from 0 per cent 
to 100 per cent between Section 1 and 2.04. That 
way, everything synchronises perfectly. 


Now you're ready to export the file, which is 
pretty much complete for our purposes. If you 
first go to the File menu and choose Preview In, you 
can pick the HTML Browser you'd prefer to work in. 
This exports the temporary file, but also exports a 
Report that shows us the file size so far! Click on the 
Export Report link to see the file size, plus modem 
download times. This can be used to adjust the file. 


2 | Now, let's add a drop shadow to this layer as 
on the main logo. In the Object Layers palette, 
create a new layer, and in the Layer palette, adjust 
the X and Y Offset values so the shadow is cast from 
top right. Also change the Softness as required, and 
adjust the Layer Opacity in the Opacity palette. 


5 | To round this off nicely, place the ‘Wording.ai’ 
Illustrator file into the scene, positioning it to 
fit with your logo. It may also be worth using the 
position of the words ‘Price’ and ‘Order’ to fine- 
tune your moving Text Groups. Remember to move 
both keyframes like before, by moving the Current 
Time to each keyframe before editing its Y axis 
values, Also be aware that moving them on their Y 
axes will also require them to be shifted left or right! 


8 | If you choose Export from the Window menu 
back in LiveMotion, you'll see that the main 
file has a compression of 50 per cent JPEG and 
Opacity at 6. Select the Box Animation layer (inside 
it's own Comp), go to the pop-up menu at the 
bottom of the palette and choose Object. Click the 
Page icon to create new settings for just this object, 
and then click the Preview button. Now, you can see 
any changes made to compress this item. 


If you do a preview (q) at this point, you'll 
notice that once the box appears (without a 
fade yet), it doesn't loop on its own. Make sure the 
Time is set to somewhere within the box's duration, 
and go to the Timeline menu and choose Time 
Independent Group. Now click the Loop button in 
the bottom left of the Timeline window. This means 
this animation has its own looping timeline, 
independent of the main composition's. 


Let's also fade this layer in the same way and 

duration as the LiveMotion box animation, 
from O per cent to 100 per cent between Section 1 
and 2.04. While we are here, let's also change the 
colour of the Background box in time with 
everything else. Twirl down the backmost layer's 
Options to Layer 1, and keyframe the End Color 
between Section 1 and 2.04, changing the end 
colour at the second keyframe to whatever you like. 
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9 | If you do this for every bitmap or affected 
graphic in your scene, you can drastically 
reduce the file size, but not at the expense of 
vector quality and frame rate. When done, choose 
Export from the File menu, and you have your 
completed SWF interactive movie with 3D vector 
and bitmap animations. EEE) 


the: 3G iSSue 
FOR ALL PROFESSIONAL WEBSITE DESIGNERS 
Making a great website is about keeping abreast of the best ideas. That's why 
every month, Cre@teOnline uncovers the most innovative and imaginative sites 
on the Web, exploring what makes them special and who put them together. We 
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Flash 5 from Scratch 


Test out the theory by getting involved in a real-world design project 


Price 


£28.99 


Author 
Cheryl Brumbaugh-Duncan 


| Publisher 


he vast majority of 

software manuals follow the 
same format of illustrating 
how each technique of the 
schiaiane works, usually beginning with 
simple features and increasing the 
difficulty level as your confidence and 
skills grow. 


| ee 


Que Unfortunately, this can leave the 
| ISBN } user with a skill set that is isolated from 
oe any real-world application. 
0789724618 


This manual is different in that it 
teaches all of the essential Flash 
techniques, but within a real-world 
design project — in this case a Website 
for a travel company. Flash is used to 
build the animations, but you also learn 
how these can be integrated into the 
overall site design. 

Divided into four distinct sections, 
you first look at the Flash work space 


and what's new in Flash 5. You then 
move on to actually creating the 
graphics that are needed for the travel 
Website, with section three taking a 
detailed look at how a Flash movie is 
built. The fourth and final section 
describes how all these elements are 
bought together on your Website. 

The layout of each page is clean and 
utilises two-tone printing to highlight 
the hints and tips. Other technical 
information on subjects like creating 
360 degree movies and using 
ActionScripting to its best advantage 
might confuse beginners, but also 
enables advanced users to push their 
knowledge a little further. 

The excellent hands-on approach of 
teaching each technique in the context 
of building a real Website puts this 
manual ahead of the competition. 


Essential Flash 5 for Web 
Professionals 


| Price 
nother manual that uses a 
£23.99 | real-world Websites and 
rs ‘ their Flash elements as a 
| Author i teaching tool. In this case, 
Lynn Kyle two Websites are used - one contains 
; just a splash page, while the other has 
| Publisher more in-depth Flash components. 
, The author follows a step-by-step 
Prentice Hall : 
approach to conveying each of the 
| ISBN techniques that the reader needs for 
: each task. At the end of each, you are 
0130913901 


prompted to save your work and take a 
look at the results. There isn’t a CD, but 
there are companion Websites where 
you can see the results working in 
real-time: a handy way of checking that 
you have understood and completed 
each tutorial correctly. 

A clean layout and well-chosen and 
clearly printed screenshots round out 
this down-to-earth manual. Ideal if you 
need a fast track to professional 
competence with Flash 5. 
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QuickPro Guide 


| Price 

£22.99 

| Author 
Russell Chun 


| Publisher 
Peachpit Press 


ISBN 
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f you’ve read the other 
Peachpit Press title 
dedicated to Flash, you'll 
already have a skill set to 
build on. You're now ready to venture 
into the realm of advanced 
ActionScripting, combining buttons 
and designing complex animated 
menus. Using the familiar Visual 
Quickstart format of numbered steps 
illustrated with clear screenshots, 
you're able to control timelines, sound 
and the information that sits behind the 
Flash animations, and check your work 
against the files on the CD. 

If you’re ready to take the next step 
with Flash design, this manual 
illustrates the key techniques that make 
some of the most complex Flash sites 
possible. Together, this manual and the 
beginners’ guide by Katherine Ulrich 
(also reviewed here) offer a complete 
Flash design course. 


Verdict 
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Price 
£29.99 
Author 


Derek Franklin and 
Brooks Patton 


Publisher 
Macromedia Press 


ISBN 
020171969X 


any manuals produced by 

the same company that 
developed the software 

\ often fail miserably. An 

exception to the rule is this manual 

from Macromedia Press, the 

developers of Flash. 

It isn’t just an excellent reference 
manual, but also a good learning tool 
for beginners who prefer manuals with 
more of an academic feel to them. 

You won't find fancy graphics or 
a plethora of hints and tips boxes on 
each page. What you will appreciate 
is the information packed into each 
page. This manual runs to over 500 
pages - far in excess of many other 
Flash manuals. 

In fact, beginners may find the 
detailed textual approach, with its 
sparse screenshots and illustrations, a 


little overwhelming. Over 16 chapters, 
each of Flash’s foundation techniques 
are covered. 

Beginning with the ubiquitous ‘what's 
new’ section (more detailed than the 
one provided by many other books on 
the market), the book quickly settles 
down to real teaching. 

The introduction is also excellent as 
it discusses how Flash actually works 
and what it offers the Web designer. 

Overall, if you have a basic 
knowledge of the Flash environment, 
then you will appreciate the dense 
information contained on each page. 

As a reference book, this is 
excellent. With over 40 QuickTime 
movies to illustrate the more complex 
features of the program included, the 
more advanced features of Flash 
become child’s play. 


Verdict 
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Price 
£14.99 


Author 
Patricia Hartman 


Publisher 
Sybex 


ISBN 
0782128920 
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f you’re new to Flash 
animation, then this book 
i i/ provides a good introduction 
ji to the program's structure, 
but the depth of the information leaves 
a lot to be desired. Each of the key 
Flash techniques is introduced over ten 
chapters, beginning with an overview of 
the interface and concluding with how 
to export and publish your movies. 

More of a bare bones collection of 
explanatory sections, the book shows 
how Flash images and animations are 
created, but offers little help when it 
comes to applying this knowledge to 
any real design brief. Some much 
needed hands-on tutorials are 
conspicuous by their absence. 

Overall, this book is a taster to 
Flash’s possibilities, but don’t expect 
detailed help in exploiting that 
potential. You’ll be looking for a more 
detailed and helpful book as soon as 
you have turned the last page. 


Verdict 
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Flash 5 Visual 
Quickstart Guide 


Price 
/ his edition of the Flash Visual 
£13.99 ( 2) Quickstart Guide updates the 
ry earlier edition with 

Author i if information that enables any 

Katherine Ulrich Flash 5 user to learn how the Flash 
environment works, and how it can be 
exploited in an online environment. 

The author handles the technical 
aspects of teaching the program with 
consummate skill. Things kick off with 
an inside look at what is new in Flash 5, 
from the changes in the interface which 
give it a more unified look with other 
Macromedia products, to details of the 
new ActionScript language that moves 
Flash into new realms of interactivity. 

The concise tutorials that we have 
come to expect from this series of 
guides extend over 16 chapters. If you 
haven't used Flash before, this manual 
will move you towards your first 
completed animation. Read it 
sequentially to learn each technique, 
then dip into it when you need help. 


Verdict 
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Flash Web Design: 
The Art of Motion Graphics 


Hillman Curtis 


[Publisher 


New Riders 


0735708967 


lash images designed to 
communicate with the visitor 
to a Website are here called 

i ‘motion’ design. In this book, 
you not only learn how Flash was 
utilised in some key design projects, but 
also learn a little about how motion 
communicates with the viewer. 

The design of the book is also a visual 
treat. Bold design with full-colour 
screenshots give a sense of motion on 
the static page. Each project has been 
chosen to illustrate a principle, such as 
how to handle MP3 streaming and 
adding perspective to Flash designs. 
Nine design projects are dissected and 
offer an insight into how Flash can be 
used in cutting-edge design, as well as 
offering a glimpse into the mind of one 
of best Flash designers working today. 
As Curtis states: “To be a graphic 
designer is to be a communicator.” 


Verdict 


SiS HIS 


How to Use 


Macromedia Flash 5 


£26.99 


Denise Tyler & Gary Rebholz 


Publisher 


Sams 


ISBN 


0672320045 


f you like your manuals bold 

and bright, then this is the 

i ‘| book for you. Presented in full 
| colour throughout, each 

double-page spread teaches one 

technique by illustrating the action you 

need to take with excellent screenshots. 

Unlike some manuals that require you 
to draw each of the elements of the Flash 
design under discussion, this manual is a 
quick-start collection of projects so you 
can get your hands dirty as quickly as 
possible. In the absence of a CD, you will 
have to use the example image files 
shipped with your copy of Flashto 
provide the images. 

For the absolute beginner, this is an 
excellent guide, refreshingly free of 
wordy explanations or indecipherable 
jargon. A CD would have been even 
better, but even without it, this book still 
offers a fast-track to Flash competence. 


Verdict 
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Price | 
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Phillip Kerman 


Publisher 
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ISBN 
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lash can be overwhelming for 
the new user. This addition to 
the ‘in 24 hours’ series 

| enables you to learn every 
facet of Flash 5, at your own pace. 

As each tutorial is designed to be 
completed in roughly an hour, you feel 
that you have accomplished something 
new each time you finish a chapter. 

The gentle introduction to the 
program via its drawing tools and import 
menu, makes the learning curve much 
less acute than it might have been. 

Each chapter concludes with the 
now familiar ‘q&a’ section plus a 
workshop to test your knowledge. 

This isn't just a beginners book - 
some more advanced topics, such as 
optimising Websites for Flash 
animations are touched upon. It also 
contains one of the best intros to Flash 
scripting you are likely to find. 


Verdict 
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The Complete Idiot's Guide 
to Macromedia Flash 5 


£18.50 


David Karlins 


0789724421 


f you like the overall design of 
the Complete Idiot's series 
j with its cartoons and 

| formulated tutorials, then this 
is the book to teach you the basics of 
design with Flash 5. Each of the key 
features of the program are broken down 
into easily digested pieces making this 
book similar to the ‘in 24 hours’ series. 

It differs from the ‘in 24 hours’ series 
in that there isn’t any focus on the Flash 
interface or any detailed tutorials on 
each technique. Yes there's a huge 
amount of hints, tips and shortcuts, but 
these should be in addition to a solid 
teaching environment, something 
lacking here. There is plenty of useful 
information, and if you like lots of 
anecdotal explanation, then you will 
learn much. If, on the other hand, you 
prefer more structure to your tutorials, 
then this guide will leave you wanting. 


Verdict 
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